Question

Hi i need to switch between div tags, I have no idea where’s the problem…
The site is XHTML strict…

$(document).ready(function() {

    var activeId = $(".active").each(function(){
       $("#content" + $(this).attr("id").replace("tab","")).show();
    });

    $(".tabs a").click(function() {
        var $tabs =$(this).closest(".tabs"); 
        $("#content" +$tabs.attr("data-lastContent")).hide();
        $(this).closest(".tabs").find(".active").removeClass("active");
        $(this).addClass("active")
        var id = $(this).closest("li").attr("id").replace("tab","");
        $tabs.attr("data-lastContent", id);
        $("#content" + id).show();
    });

});​

It is a menu and some divs below I need to switch… I use the code from this post http://jsfiddle.net/hKMFb/24/ but with no success….

<div class="tabs" data-lastContent="1">
<li id="tab1" class="active"><a href="#">PROSBA</a></li>
<li id="tab2"><a href="#">PRŮVODNÍ TEXT</a></li>
<li id="tab3"><a href="#">GALERIE</a></li>
<li id="tab4"><a href="#">JAK POMOCI?</a></li>
</div>
<div id="content1" class="content"><div class="scroller">ahojjjj</div></div>
<div id="content2" class="content"><div class="scroller">nee</div></div>
<div id="content3" class="content"><div class="scroller">ahdad</div></div>
<div id="content4" class="content"><div class="scroller">ahod</div></div>

Any input is appreciated.

Thanks.
Jan

Answer 1

Using the basics…DEMO

JS:

$(function(){
   $('.content').hide(); //hide all the contents
   $('.active').show();  //show only active
    $('.tab').click(function(event){
        event.preventDefault(); //stop from linking
    $('.content').hide(); //hide all the contents
    $('.selected').removeClass('selected'); //remove class from current tab
    $('.active').removeClass('active'); //remove class from current content
    var id = $(this).attr('href'); //get desired content id
    $(this).addClass('selected'); //add class to clicked tab
    $('#'+id).addClass('active').show(); //add class to active content and display
    });    

});
​

HTML:

<ul>
    <li><a href="content1" class="tab selected">Tab1</a></li>
    <li><a href="content2" class="tab">Tab2</a></li>
    <li><a href="content3" class="tab">Tab3</a></li>
    <li><a href="content4" class="tab">Tab4</a></li>
</ul>
<div id="display">
    <div id="content1" class="content active">blah</div>    
    <div id="content2" class="content">blahh</div>
    <div id="content3" class="content">blahhh</div>
    <div id="content4" class="content">blahhhh</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.selected { color: #933; }