Member Avatar for Moderns

Hi friends,

I have prblem that I need to view tab #2 when loading the index page, here is part of the index, it goes to tab1 as per the javascript function below (.tab_content:first).show, I tried (.tab_content:second).show but it did not work! Also I was unable to activiate first class.. Thanks a lot!

/////index page
$("ul.tabs li:").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

<ul class="tabs">
    <li><a href="#tab1">tab2</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->   </div>
    <div id="tab2" class="tab_content">
       <!--Content-->  TAB 2
    </div>

    <div id="tab3" class="tab_content">
       <!--Content-->  TAB 3
    </div>

</div>


//////// the javascript function:

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    [COLOR="Red"]$("ul.tabs li:").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content[/COLOR]

    //On Click Event
    $("ul.tabs li").click(function() {

   // alert ($(document));
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        //alert ($(activeTab).value);
        return false;
    });

});
Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 8 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Moderns
Member Avatar for Moderns

I tried to search on html syntax, but I can't find, maybe it's not supported in HTML?

Still awaiting any reply..

Thanks..

Member Avatar for Moderns

Thanks for your reply, but it's not working with me :(

I am trying this: $('.tab_content').tabs('select', 1).show();
But unable to show the tab2..

Please can you help me with the exact code to be added to my code and will be so thankful..

Thanks..

Member Avatar for hielo

You need an element that contains/wraps both, the tabs and the content of the tabs. On the example below, this container is 'tabWrapper'. The the example below as test.html and try it:

<!DOCTYPE html>
<html>
<head>


  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.tab_content{display:none;}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  var t=null;
  $(document).ready(function() {

	t=$('#tabWrapper').tabs();
	t.tabs('select',2);
  });
  </script>
</head>
<body style="font-size:62.5%;">


     <div id='tabWrapper'>
          <ul class="tabs">
          	<li><a href="#tab1">tab1</a></li>
          	<li><a href="#tab2">tab2</a></li>
          	<li><a href="#tab3">tab3</a></li>
          </ul>
          
          <div class="tab_container">
          	<div id="tab1" class="tab_content">
          		<!--Content-->1
          	</div>
          
          	<div id="tab2" class="tab_content">
          		<!--Content--> TAB 2
          	</div>
          
          	<div id="tab3" class="tab_content">
          		<!--Content--> TAB 3
          	</div>
          </div>
     </div>
</body>
</html>
Member Avatar for Moderns

Thanks hielo for your effort,

Actually what I want to know, if possible to add to the following two lines a word like word "first", let us say: "second" for example, to activate "second" tab. Actually I was able to activate last tab using word "last" as below..

//To activate first tab///
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content..

///To activate last tab, just replace word "first" with "last" like://
$("ul.tabs li:last").addClass("active").show(); //Activate last tab
$(".tab_content:last").show(); //Show last tab content

Please guide me if possible to activate second, third, fourth tabs etc... similar to way above?

Many thanks!

Member Avatar for hielo

"first" and "last" are "special". There is no such thing as "second", "third", etc. However, you can used an index selector. This:

$("ul.tabs li:first").addClass("active").show(); //Activate first tab

is equivalent to this:

$("ul.tabs li:eq(0)").addClass("active").show(); //Activate first tab

So to activate the second tab, you just need to increment the index by 1:

$("ul.tabs li:eq(1)").addClass("active").show(); //Activate Second tab

Likewise if you want to activate the:
third => li:eq(2)
fourth => li:eq(3)
etc.

Edited by hielo because: n/a
Member Avatar for Moderns

Hi pritaeas, hielo really I do not know how to thank you! Yes it's exactly what I wanted.. it's working perfect with me :)

I used this to activate 2nd tab and it worked perfect.
$("ul.tabs li:nth-child(2)").addClass("active").show(); //Activate second tab
$(".tab_content:nth-child(2)").show(); //Show second tab content

I have created a normal JS function that contains the Jquery function, and I passed the page name using <body onload=function('page_name')> to that normal JS function to detect the tab and select it according to the page which is loaded..

Many thanks again for you and for all Dani Web community :)..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.