Menu icon Foundation
Tabs problem with Opera and Safari

Hi everybody,

Why using Opera or Safari tabs works only after I refresh the page?
What can I try to do?

Thanks

tabs not workstabs problemsSafariopera

Hi everybody,

Why using Opera or Safari tabs works only after I refresh the page?
What can I try to do?

Thanks

Rafi Benkual almost 4 years ago

Could be lot's of things. Can you share your code so we can help more.

L. Fib. almost 4 years ago

<div class="row">
  <div class="show-for-medium-up">
    <div class="medium-12 columns medium-centered bluff-off">
      <ul class="tabs" data-tab>
        <li class="tab-title active"><a href="#panel1">Carico</a></li>
        <li class="tab-title"><a href="#pan2">Scarico</a></li>
        <li class="tab-title"><a href="#pan3">Crea codici</a></li>
      </ul>
      <div class="tabs-content">
        <div class="content active" id="panel1">

        ...this DIV last for about others 300 lines

        </div>
        <div class="content" id="pan2">  

        ...this DIV last for about others 300 lines

        </div>
      </div>
    </div>
  </div>
</div>

The content of the two panel is pure HTML, without script.
Outside I control the behaviour of the two DIV with class "bluff-off" by this script

<script type="application/javascript">

var bottoneCerca = document.getElementById("cerca");
var bottoneTrasferisci = document.getElementById("transfer");
var tabCerca = document.getElementById("divCerca");
var tabTransfer = document.getElementById("divTransfer");

  bottoneCerca.addEventListener("click", function(a){

    a.preventDefault;

    tabCerca.removeAttribute("class", "bluff");    
    tabCerca.setAttribute("id", "bluff-off-divCerca");
    tabTransfer.removeAttribute("id", "bluff-off-divTransfer");
    tabTransfer.setAttribute("class", "bluff");

  }, true);

  bottoneTrasferisci.addEventListener("click", function(a){

    a.preventDefault;

    tabTransfer.removeAttribute("class", "bluff");    
    tabTransfer.setAttribute("id", "bluff-off-divTransfer");
    tabCerca.removeAttribute("id", "bluff-off-divCerca");
    tabCerca.setAttribute("class", "bluff");

  }, true);

</script> 

L. Fib. almost 4 years ago

I also notice that the Url is updated when i click on the tabs button.