In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

Question

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

  function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

               .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 560px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #ddd}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    
    /* Style the tab */
    .tab {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 30%;
        height: 300px;
    }
    
    /* Style the buttons inside the tab */
    .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 22px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
    }
    
    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }
    
    /* Create an active/current "tab button" class */
    .tab button.active {
        background-color: #ccc;
    }
    
    /* Style the tab content */
    .tabcontent {
        float: left;
        padding: 0px 12px;
        /*border: 1px solid #ccc;*/
        width: auto;
        border-left: none;
        height: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


          <div class="dropdown">
      <button class="dropbtn" href="index.html">Dropdown</button>
      <div class="dropdown-content">
        
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">Discover</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'india')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    
    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    
    <div id="india" class="tabcontent">
      <h3>India</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
      </div>
    </div>

I want to implement dropdown functionality along with tabs that can be interacted with custom CSS and JavaScript. I have been troubleshooting this code but haven't been able to figure out what's wrong. Could anyone assist me in achieving this feature? Additionally, provide a detailed explanation or alternative approach if available.

https://codepen.io/srireddy1/pen/vdadjP

javascript html css

Answer 1

Answer №1

Make sure to update the

onclick="openCity(event, 'London')"

with

onmouseover="openCity(event, 'London')"

.

By making this change, the tabs will now switch when you hover over them.

Answer 2

Make sure to update the

onclick="openCity(event, 'London')"

with

onmouseover="openCity(event, 'London')"

.

By making this change, the tabs will now switch when you hover over them.

Answer 3

Answer №2

Replace using onmouseover rather than onClick.

Delete

document.getElementById("defaultOpen").click();

and add the classes active and display:block to the first tabs like so:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Find the element with id="defaultOpen" and click on it

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 560px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* More CSS styles... */

<div class="dropdown">
  <button class="dropbtn" href="index.html">Dropdown</button>
  <div class="dropdown-content">

    <div class="tab">
      <button class="tablinks active" onmouseover="openCity(event, 'London')" id="defaultOpen">Discover</button>
      <button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onmouseover="openCity(event, 'india')">India</button>
      <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent" style="display:block;">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="india" class="tabcontent">
      <h3>India</h3>
      <p>India is a country in South Asia.</p>
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
</div>

Answer 4

Replace using onmouseover rather than onClick.

Delete

document.getElementById("defaultOpen").click();

and add the classes active and display:block to the first tabs like so:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Find the element with id="defaultOpen" and click on it

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 560px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* More CSS styles... */

<div class="dropdown">
  <button class="dropbtn" href="index.html">Dropdown</button>
  <div class="dropdown-content">

    <div class="tab">
      <button class="tablinks active" onmouseover="openCity(event, 'London')" id="defaultOpen">Discover</button>
      <button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onmouseover="openCity(event, 'india')">India</button>
      <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent" style="display:block;">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="india" class="tabcontent">
      <h3>India</h3>
      <p>India is a country in South Asia.</p>
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
</div>

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

Answer №1

Answer №2

Similar questions

A static method written in Typescript within an abstract class for generating a new instance of the class itself

Tips for effectively managing index positions within a dual ngFor loop in Angular

scraping information using xpath from the subsequent page

Bottom-aligning text in Tailwind CSS

Error message: Unable to locate the 'npm' task in Visual Studio Code

When working with a destination module, what is the best method for storing the value that is returned from an

A combination of Tor Browser, Selenium, and Javascript for

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

What was the inspiration behind Spotify's section design?

Hyperlinks functioning properly in Mozilla Firefox, yet failing to work in Internet Explorer

Implementing a play and pause button functionality for the carousel in Bootstrap 5

Attempting to invoke setState on a Component before it has been mounted is not valid - tsx

Invoke `setState` function in contexts outside of React framework

Include a tooltip on every image by utilizing the title attribute

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Switching from using jQuery.ajax() to fetch() when making requests to a Go REST API endpoint with no payload

Showing list data from script to template in vue - A step-by-step guide

Setting an if isset statement below can be achieved by checking if the variable

Error: The JavaScript function you are trying to use is not defined

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide