When clicking the buttons access the corresponding tab

Asked

Viewed 26 times

0

I took a model of W3schools and I modified it so that it had 3 buttons, one for each city.

In the current form, any button to be clicked will show the modal in the tab "London", that is, the first! However, what I want is to open the tab as each button clicked! (London, Paris and Tokyo)

Example below:

document.getElementsByClassName("tablink")[0].click();

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
.city {
  display: none
}

.w3-container {
  min-height: 1px;
  max-height: 400px;
  overflow: auto;
}
<div class="w3-container">
  <h2>Modal Tabs</h2>
  <p>In this example we add tabbed content inside the modal.</p>

  <button id="ldn" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">London</button>

  <button id="prs" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Paris</button>

  <button id="tky" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Tokyo</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-2 w3-animate-opacity">
      <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-red w3-medium w3-display-topright">&times;</span>

      <div class="w3-bar w3-border-bottom">
        <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
        <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
        <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
      </div>

      <div id="London" class="w3-container city">
        <h1>London</h1>
        <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum placerat magna semper congue. Fusce vitae sem in quam dictum convallis eget nec odio. Vestibulum pellentesque, erat a lacinia ultrices, eros magna tincidunt quam, consequat
          semper magna ex ut ante. Donec ullamcorper magna dictum, iaculis ex in, consectetur tortor. Suspendisse quis vestibulum nunc, id ornare urna. Aliquam ac vestibulum elit, a fermentum massa. Nulla vehicula ultricies malesuada. Nam scelerisque
          accumsan ligula, rutrum vestibulum sem fermentum et. Proin malesuada suscipit viverra. Etiam imperdiet tincidunt sollicitudin. Curabitur viverra, est vel accumsan placerat, est orci maximus ante, sit amet convallis metus augue sit amet nisi.
          Sed sit amet augue a nulla gravida pellentesque. Morbi tempus tincidunt velit id finibus. Pellentesque ultricies risus sed ipsum feugiat commodo. Donec sit amet dui eros. Nam condimentum tristique pellentesque. Curabitur et lorem faucibus, rhoncus
          augue sed, imperdiet urna. Maecenas et porta lacus, sed luctus nisi. Phasellus ut aliquam purus. Morbi pharetra cursus lacus, vitae commodo neque accumsan a. Curabitur iaculis congue felis vitae tempus. Duis nunc risus, ultricies non orci at,
          maximus fermentum tellus. Aliquam non placerat urna, id euismod dui. Morbi vestibulum gravida lectus in volutpat. Aliquam lacinia hendrerit libero eu suscipit. In in dapibus ante. Ut consectetur, ante nec accumsan feugiat, arcu sapien laoreet
          ex, in mattis urna libero ut quam. Curabitur volutpat, lectus in cursus tempor, ipsum nibh varius mauris, eget commodo metus urna sed dolor. Curabitur quis venenatis leo, in pharetra magna. Nulla vel eros ut urna vestibulum bibendum eu quis
          tortor. Vestibulum nec finibus mi. Donec cursus lacus quis purus porttitor mattis. Phasellus ultrices tellus ac lectus luctus, volutpat mattis lacus porta. Vivamus in metus elementum dolor vehicula mollis. In in leo at odio faucibus efficitur
          sit amet quis sapien. Curabitur posuere risus a mi vulputate, ac convallis est molestie. Donec non odio ut risus elementum pulvinar ac in nisi. Donec ac tempus neque, a dapibus risus. Quisque cursus, massa et laoreet tincidunt, turpis purus
          luctus eros, at mollis est mi in felis. Ut mollis feugiat leo, quis volutpat erat scelerisque ac. Aenean id purus nec ipsum fringilla sodales. Cras sed metus leo. Aenean malesuada ultrices orci, id aliquam nibh convallis in. Nulla sodales ac
          felis id pulvinar. Duis non nunc non sapien fringilla molestie. Sed eros sapien, molestie eu lacinia tempor, laoreet rhoncus tellus. In nec tellus finibus, lobortis libero et, laoreet libero. In quis nisi commodo, lacinia odio feugiat, egestas
          arcu. Praesent nulla nunc, hendrerit eget nisi sit amet, semper mollis tortor. Quisque sit amet est feugiat, laoreet turpis id, egestas ante. Pellentesque ac ligula ex. Donec dapibus tortor vel ultrices ultricies. Vestibulum bibendum bibendum
          urna eu malesuada. Nam pharetra orci euismod odio volutpat ultricies. Fusce pulvinar, erat in blandit tincidunt, ante lorem suscipit diam, id efficitur sem sem ac velit.</p>
      </div>

      <div id="Paris" class="w3-container city">
        <h1>Paris</h1>
        <p>Paris is the capital of France.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <div id="Tokyo" class="w3-container city">
        <h1>Tokyo</h1>
        <p>Tokyo is the capital of Japan.</p><br>
      </div>
    </div>
  </div>
</div>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.