jquery - 无法使用 jQuery 显示选定的选项卡

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

你把#a而不是a放在你的id中，如#它已经用来定义一个你在html中不需要它的idid=

固定 jsfiddle http://jsfiddle.net/9xrjD/2/

Answer 2

jsFiddle在这里。

代替

<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- not #a,#b和的元素#c。