Calling a tab (javascript) through another page

Asked

Viewed 165 times

1

I have a page called Products. This page has a group of tabs. WHY EX: tab 1, tab 2 and tab 3). I have at home a link that needs to call the products page and with tab2 already open. How do I?

The tab2 call on the Products page is Tab 2

O Javascript:

 <script language="javascript">
    function MyFunction(divName){

    //hidden val
    var hiddenVal = document.getElementById("tempDivName"); 

    //hide old
    if(hiddenVal.Value != undefined){
        var oldDiv = document.getElementById(hiddenVal.Value); 
        oldDiv.style.display = 'none'; 
    }

    //show div
        var tempDiv = document.getElementById(divName); 
        tempDiv.style.display = 'block';              

    //save div ID
        hiddenVal.Value = document.getElementById(divName).getAttribute("id");

    }
</script>

HTML of the Products page :

    <input id="tempDivName" type="hidden" />
    <a href="#" OnClick="MyFunction('myDiv1');"><img class="alignleft size-full wp-image-8214" src="http://totalmed.net.br/wp-content/uploads/2015/08/icons_geis_correlatos.jpg" alt="icons_geis_correlatos" width="166" height="96" /></a>
<a href="#" OnClick="MyFunction('myDiv2');"><img class="alignleft size-full wp-image-8215" src="http://totalmed.net.br/wp-content/uploads/2015/08/icons_ginecologia_obstetricia.jpg" alt="icons_ginecologia_obstetricia" width="166" height="96" /></a>
<a href="#" OnClick="MyFunction('myDiv3');"><img class="alignleft size-full wp-image-8221" src="http://totalmed.net.br/wp-content/uploads/2015/08/icons_suporte_vida.jpg" alt="icons_suporte_vida" width="166" height="96" /></a>

[text_divider type="double"]
<h1>Produtos</h1>
[/text_divider]

<!-- AQUI COMEÇA UM GRUPO DE TAB -->

    <div id="myDiv1" style="display: none;">

    [column width="1/1" last="true" title="Geis e Correlatos" title_type="single" animation="from-left" implicit="true"]

    [tabs layout="vertical" nav_color="accent1" left_color="accent2" right_color="accent4"]
    [tab icon="" title="Acessórios"]

[/column_1]

[column_1 width="1/2" last="true" title="" title_type="single" animation="none" implicit="true"]

<img class="size-full wp-image-7604 aligncenter" src="http://totalmed.net.br/wp-content/uploads/2015/08/geis.png" alt="geis" width="314" height="314" />

[/column_1]
[/tab]

[tab icon="" title="Higienizador Íntimo"]

[blank h="60"]

[/blank]   

[/column]

</div>

    <!-- AQUI COMEÇA UM GRUPO DE TAB -->

    <div id="myDiv2" style="display: none;">

[column width="1/1" last="true" title="Ginecologia e Obstetrícia" title_type="single" animation="from-left" implicit="true"]

[tabs layout="vertical" nav_color="accent1" left_color="accent2" right_color="accent4"]
[tab icon="" title="Cânulas / Cateters / Guias"]    

This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.     
    </div>

    <!-- AQUI COMEÇA UM GRUPO DE TAB -->

    <div id="myDiv3" style="display: none;">

[column width="1/1" last="true" title="Suporte à vida" title_type="single" animation="from-left" implicit="true"]

[tabs layout="vertical" nav_color="accent1" left_color="accent2" right_color="accent4"]
[tab icon="" title="Analisadores e Simuladores"]    

[column_1 width="1/2" last="true" title="" title_type="single" animation="none" implicit="true"]

<img class="size-full wp-image-7604 aligncenter" src="http://totalmed.net.br/wp-content/uploads/2015/08/suporte.png" alt="Suporte à vida" width="314" height="314" />

[/column_1]
[/tab]
[/tabs]

[/column]
</div>

1 answer

1


I’m not quite sure how wordpress interprets this but tests like this:

Use in the URL which tab you want to open. The same way you use OnClick="MyFunction('myDiv1'); you can use a URL that has a query string thus:

meu.site.com/pasta/subpasta/?tab=myDiv1

and at the start of the page you use, in JS, like this:

var queryString = location.search.slice(1);
var tab = queryString.match(/tab=(\w+)/);
if (tab) MyFunction(tab[1]);

So it will search the URL by tab=xxx and if there is will call the function with the tab name.

Browser other questions tagged

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