0

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: Fixed formatting

3
Contributors
8
Replies
10
Views
7 Years
Discussion Span
Last Post by Moderns
0

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

Still awaiting any reply..

Thanks..

0

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..

0

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>
0

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!

0

"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: n/a

0

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 :)..

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.