Links to Tabs in Jquery

Asked

Viewed 145 times

0

I’m having some problems in following example.

I intend to add links from another page, with href. When I click on these links, automatically open the TAB, it is possible?

First page where I have links

<a href="www.site.com/?page=about#tab1">TAB1</a>
    <a href="www.site.com/?page=about#tab2">TAB2</a>

Second page, where I have tabs with my code.

  Licenciaturas
<ul class="navi">
    <li><a class="menu2" href="#tab1">Eng Inf</a></li>
    <li><a class="menu3" href="#tab2">Eng Quimic</a></li>
    <li><a class="menu4" href="#tab3">Eng Civil</a></li>
</ul>
<br><br>
 Mestrados
<ul class="navi">
    <li><a class="menu2" href="#tab10">Mestrado 1</a></li>
    <li><a class="menu3" href="#tab11">Mestrado 2</a></li>
    <li><a class="menu4" href="#tab12">Mestrado 3</a></li>
    <li><a class="menu5" href="#tab13">Mestrado 4</a></li>          
    <li><a class="menu6" href="#tab14">Mestrado 5</a></li>
</ul>

<div id='tab1'>
   TEXTO LICENCIATURA 1
</div>
 <div id='tab2'>
   TEXTO LICENCIATURA 2
</div>
 <div id='tab10'>
   TEXTO Mestrado 1
</div>
 <div id='tab11'>
   TEXTO Mestrado 2
</div>

$('ul.prov').on('click', 'a', function (e) {
    //Change content displayed
    $($("ul.prov a.active")[0].hash).hide();      
    $(this.hash).show();

    //Change active item
    $("ul.prov a.active").removeClass("active");    
    $(this).addClass("active");  

    e.preventDefault();
});

//Hide all content divs except first one
$("ul.prov a").each(function(index){
    if(index != 0)
        $(this.hash).hide();
    else
        $(this).addClass("active");
});

$('a').click(function(){
   $("#tabs").tabs("option", "active", parseInt(this.id));
});
  • You want the contents of another web page to be loaded on that tab, that’s it?

  • 3

    Set "open the tab".

  • I wanted, through a newsletter, or another page of the site to open directly that TAB

  • Or for example I have 2 web pages. One with tabs, and texts referring to each tab. And a home page, where I want to create a link, to open a specific content of one of the tabs.

1 answer

1


Since you are using jQuery, you can use the Tabs from jQuery UI. It is very simple to use and already comes with several implemented events.

  • Thanks, It’s an alternative, but I’ve spent hours applying the other and manipulating the CSS that I thought was simple to apply a link

Browser other questions tagged

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