使用javascript切换div标签在xhtml严格中不起作用答案

【问题标题】：switch div tags using javascript doesnt work in xhtml strict使用javascript切换div标签在xhtml严格中不起作用
【发布时间】：2012-12-13 11:16:25
【问题描述】：

您好，我需要在 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>

感谢任何输入。

谢谢。一月

【问题讨论】：

在这里它使用相同的代码jsfiddle.net/hKMFb/237
问题是数据属性是 HTML5。 data-lastContent
哦，那我如何在 xhtml 中做到这一点？
为什么它在 jsfiddle 中有效？（就像一个魅力：jsfiddle.net/hKMFb/252
JSFiddle 支持最新技术并“填补”空白。它没有考虑服务器设置等。

标签： javascript html xhtml switch-statement

【解决方案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; }

【讨论】：