Question

我在使用链接显示所选标签式div时遇到了一些麻烦：

<script>
$(function(){
    $('ul#tabs>li a').click(function(e){
        e.preventDefault();
        var tab = $(this).attr('href');
        $(tab).css('display', 'block');
        $(tab).siblings('div').css('display', 'none');
    })
});

</script>

这是HTML：

<div id="tabsBox">
    <ul id="tabs">
        <li><a href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        <li><a href="#c">C</a></li>
    </ul>
    <div id="#a">A content</div>
    <div id="#b">B content</div>
    <div id="#c">C content</div>
</div>

这是在JSFiddle http://jsfiddle.net/9xrjD/

中

有没有人知道它为什么不起作用？

Answer 1

您在我的ID中添加了#a而不是a，因为#已用于定义您在html id=中不需要的ID

修正了jsfiddle http://jsfiddle.net/9xrjD/2/

Answer 2

jsFiddle here.

替换

<div id="#a">A content</div>
<div id="#b">B content</div>
<div id="#c">C content</div>

使用

<div id="a">A content</div>
<div id="b">B content</div>
<div id="c">C content</div>

您的功能确实有效，但实际上您并没有将<div>隐藏在CSS中。

#a, #b, #c {
  display: none;
}

将使用ID a，b和c隐藏所有元素，而不是#a，#b和#c。

使用jQuery显示所选选项卡时出现问题

2 个答案: