Search code examples
javascripthtmlwebflow

When Tab is clicked replace window


im trying to do an Language Switcher for a Website and i am using an Tab element with 2 Tabs -

Now i am trying to do a window.location.replace to an url when one of the tabs is clicked.

So tab 1 should link to google.de and tab 2 to google.com

I dont quite know how to define each tab

thats the current code i got

<script>
// when DOM ready
$(document).ready(function() {
  // if 'tab' item exists in localStorage
  if(localStorage.getItem('tab')){
    // click the respective tab button
    // e.g. if 'tab' item value == 0
    // click tab[0]
    $('.tab-button')[localStorage.getItem('tab')].click();
  }
});

// on tab click
$('.tab-button').click(function(){
  // get its index
  const index = $('.tab-button').index(this);
  // store the index in localStorage
  localStorage.setItem('tab',index);
});
</script>

Solution

  • <script>
    // when DOM ready
    $(document).ready(function() {
      // if 'tab' item exists in localStorage
      if(localStorage.getItem('tab')){
        // click the respective tab button
        // e.g. if 'tab' item value == 0
        // click tab[0]
        $('.tab-button')[localStorage.getItem('tab')].click();
      }
    });
    
    // on tab click
    $('.tab-button').click(function(){
      // get its index
      const index = $('.tab-button').index(this);
      // store the index in localStorage
      localStorage.setItem('tab',index);
    
      if (index == 1) {window.open('google.de', '_self');} 
      else if (index == 2) {window.open('google.com', '_self');}
      else {//open default window}
    
    });
    </script>