-5

我想做一个表格菜单。我有五个选项卡，每个选项卡都有一个特定的 div 元素。当我单击选项卡时，例如 tab1，id 为 tab1 的 div 元素获取类内容，而其他 div 的类被删除，但它似乎不起作用

<script src="js/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
    body, html, div, ul,li,a  {margin:0; padding:0;}
    body {font-family:arial;font-size:12px;}
    .clear {clear:both;}
    a img {border:none;}
    ul {
        list-style:none;
        position:relative; 
        z-index:2;
        top:1px;
        display:table;
        border-left:1px solid #f5ab36;
        }
    ul li {float:left;}
    ul li a {
        background:#ffd89b;
        color:#222;
        display:block;
        padding:6px 15px;
        text-decoration:none;
        border-right:1px solid #f5ab36;
        border-top:1px solid #f5ab36;
        border-right:1px solid #f5ab36;
        }
    ul li a.selected  
    {
        border-bottom:1px solid #fff;
        color:#344385;
        background:#fff;
    }
    h1 {
            display:block;
            width:600px;
            margin:0 auto;
            padding:20px 0;
            color:#fff;
        }
    #navigation {width:602px; margin: 0 auto;}
    .content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;}
    #logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;}
    .remove
    {
        display:none;
    }
</style> 

</head> 

<body> 
<h1>Simple tabbed menu</h1> 

<div id="navigation"> 
    <ul> 
        <li ><a href="javascript:void(0);" id="1" class="">Tab 1</a></li> 
        <li><a class="" href="javascript:void(0);" id="2">Tab 2</a></li> 
        <li><a class="" href="javascript:void(0);" id="3">Tab 3</a></li> 
        <li><a class="" href="javascript:void(0);" id="4">Tab 4</a></li> 
        <li><a class="selected" href="javascript:void(0);" id="5">Tab 5</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
<div id="remove1">
    <div id="tab1" class="">
     pannel doesn't always shows everythings
    </div>
     <div id="tab2" class="">
    this is not a favorit glass
     </div>
    <div id="tab3" class="">Oh my god we don't have such strong idea</div>
    <div id="tab4" class="">my favorit pannel is hear</div>
    <div id="tab5" class="">Do not talk too much</div>      
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $('#remove1 div').addClass('remove');
        $('#remove1 div').removeClass('content');   
        $('#navigation ul a').click(function(){
            $('#navigation ul a').removeClass('selected');
                $(this).addClass('selected');


            if($(this).attr('id')==1)
            {

        $('#remove1 div').addClass('remove');
                $('#tab1').addClass('content');

            }
            else if($(this).attr('id')==2)
            {

                $('#remove1 div').addClass('remove');
                $('#tab2').addClass('content');             

            }
            else if($(this).attr('id')==3)
            {

                $('#remove1 div').addClass('remove');
                $('#tab3').addClass('content');


            }
            else if($(this).attr('id')==4)                      
            {
                $('#remove1 div').addClass('remove');
                $('#remove1 div').removeClass('content');

                $('#tab4').addClass('content');

            }
            else if($(this).attr('id')==5)                      
            {

                $('#remove1 div').addClass('remove');
                $('#tab5').addClass('content');
            }
        });


    });
</script> 



</body></html>

当我单击预期隐藏所有 div 元素并显示特定 div 的元素时，它什么也不做。

4

2 回答 2

3

您总是添加类remove，但从不删除它。一个元素的类是一个集合；当您再次添加某些内容时，它不会优先于其余内容。

您可以在任何地方复制和粘贴几个removeClasses（包括您为 #4 拥有但似乎在其他地方忘记的那个），或者您可以使用连接来找到正确的元素：

var $links = $('#navigation a');
var $tabs = $('#remove1 > div');

$links.click(function(e) {
    $links.removeClass('selected');
    $(this).addClass('selected');

    $tabs.removeClass('content').addClass('remove');
    $('#tab' + this.id).addClass('content').removeClass('remove');
});

接下来，将其设为外部样式表并使用<link>元素链接到它。之后，将display: none;其设为默认值并取出.addClass('remove')and .removeClass('remove')。javascript:void(0)真是不好的做法；取出id属性（您正在滥用；如果有的话应该是data-id）并链接到实际选项卡：

<li><a href="#tab2">Tab 2</a></li>

然后在事件侦听器结束时停止链接：

e.preventDefault();

并使用整个href属性而不是那个不太好的连接：

$(this.getAttribute('href')).addClass('content');

最后，你应该完全放弃 jQuery 并尝试普通的旧 JavaScript，给定一个不错的浏览器。

于 2013-06-23T13:58:06.397 回答
2

您忘记删除remove该类，使其保持隐藏状态。不需要所有的 if 语句，一种选择是将 a 添加data-tabid到您的锚点并将其用作显示 div 的 id。

<!DOCTYPE html>
<html>
 <head>
<script src="jquery-1.9.0.js"></script>
<title>test</title>
<style type="text/css"> 
    body, html, div, ul,li,a  {margin:0; padding:0;}
    body {font-family:arial;font-size:12px;}
    .clear {clear:both;}
    a img {border:none;}
    ul {
        list-style:none;
        position:relative; 
        z-index:2;
        top:1px;
        display:table;
        border-left:1px solid #f5ab36;
        }
    ul li {float:left;}
    ul li a {
        background:#ffd89b;
        color:#222;
        display:block;
        padding:6px 15px;
        text-decoration:none;
        border-right:1px solid #f5ab36;
        border-top:1px solid #f5ab36;
        border-right:1px solid #f5ab36;
        }
    ul li a.selected  
    {
        border-bottom:1px solid #fff;
        color:#344385;
        background:#fff;
    }
    h1 {
            display:block;
            width:600px;
            margin:0 auto;
            padding:20px 0;
            color:#fff;
        }
    #navigation {width:602px; margin: 0 auto;}
    .content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;}
    #logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;}
    .remove
    {
        display:none;
    }
</style> 

</head> 

<body> 
<h1>Simple tabbed menu</h1> 

<div id="navigation"> 
    <ul> 
        <li ><a href="javascript:void(0);" id="1" data-tabid="tab1" class="">Tab 1</a></li> 
        <li><a class="" href="javascript:void(0);" id="2" data-tabid="tab2">Tab 2</a></li> 
        <li><a class="" href="javascript:void(0);" id="3" data-tabid="tab3">Tab 3</a></li> 
        <li><a class="" href="javascript:void(0);" id="4" data-tabid="tab4">Tab 4</a></li> 
        <li><a class="selected" href="javascript:void(0);" id="5" data-tabid="tab5">Tab 5</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
<div id="remove1">
    <div id="tab1" class="">
     pannel doesn't always shows everythings
    </div>
     <div id="tab2" class="">
    this is not a favorit glass
     </div>
    <div id="tab3" class="">Oh my god we don't have such strong idea</div>
    <div id="tab4" class="">my favorit pannel is hear</div>
    <div id="tab5" class="">Do not talk too much</div>      
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#remove1 div').addClass('remove');
        $('#remove1 div').removeClass('content');
        $("#tab5").addClass('content');
        $('#tab5').removeClass('remove');

        $('#navigation ul a').click(function () {
            var tabID = this.getAttribute("data-tabid")
                .toString();
            $('#navigation ul a').removeClass('selected');
            $(this).addClass('selected');
            $('#remove1 div').addClass('remove');
            $('#' + tabID).addClass('content');
            $('#' + tabID).removeClass('remove');
        });


    });
</script> 



</body></html>
于 2013-06-23T13:58:20.607 回答