开关div标签严格

Question

嗨，我需要div标签之间切换，我不知道在哪里的问题...... 该网站是XHTML严格...

$(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(); 
    }); 

});​ 

这是菜单及以下我一些div需要切换...我使用的代码从这个职位http://jsfiddle.net/hKMFb/24/，但没有成功....

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

任何输入赞赏。

谢谢。 扬

Answer 1

使用的基本知识...... 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; }