2

有人可以花点时间看看这个，让我知道我的代码哪里出错了吗？

出于某种原因，单击按钮时内容 div 不会更改。
这很简单，现在我因为找不到我的错误而感到很困惑。

CSS：

#wrapper {
margin: 0 auto;
    width:100%;
    max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:1.5em;
}


#buttons {
width:340px;
    float: left;
    height: 133px;
    margin: 10px 10px 0 0px;
    border-right: 1px solid #666;
}

#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}

#button1 a:hover {
background-position: -292 -105px;
}

#button1 a:active {
background-position: -292 -210px;
}

#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}

#button2 a:hover {
background-position: -438px -105px;
}

#button2 a:active {
background-position: -438px -210px;
}

#content {
font-family: Arial, Helvetica, sans-serif;
    float: left;
    display:block;
}

a {
text-decoration:none;
}

ul {
overflow:hidden;
    margin: 10px 0 0 8px;
    padding:0;
}

li{
    line-height:1.5em;
    display:inline;
}

#content1 {
color:#953735;
}

#content2 {
color:#604a7b;
}

JavaScript：

$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});

HTML：

<div id="wrapper">
<div id="button">
    <div id="button1">
        <a href="#" name="content1"></a>
    </div>
    <div id="button2">
        <a href="#" name="content2">Reporting Administrator</a>
    </div>
</div>
    <div id="content">
        <div id="content1">
            <ul>
                <li><a href="#">Stuff1</a></li><br />
                <li><a href="#">Stuff1</a></li><br />
                <li><a href="#">Stuff1</a></li>
            </ul> 
        </div>
        <div id="content2" style="display:none;"> 
            <ul>
                <li><a href="#">Stuff2</a></li><br />
                <li><a href="#">Stuff2</a></li><br />
                <li><a href="#">Stuff2</a></li>
             </ul> 
        </div>   
  </div>

</body>
</html>
4

2 回答 2

3

选择器$('button')是问题所在。您不想选择按钮 - 元素，而是选择 div#button中的元素，对吗？

$("#button a")因此，如果要将事件处理程序附加到元素内的所有链接，则应将其作为选择器#button。

于 2012-11-11T22:10:06.707 回答
0

David Müller 认为按钮选择器是一个问题是正确的。

链接上的事件没有发生切换，因为链接的索引将为 0，因为它们都是唯一的孩子。如果事件发生在父 div 上，则切换有效。下面是一个jsfiddle和代码。

http://jsfiddle.net/VrKsh/2/

<div id="wrapper">
<div id="button">
    <div id="button1">
        <a href="#" name="content1">Content1</a>
    </div>
    <div id="button2">
        <a href="#" name="content2">Content2</a>
    </div>
</div>
<div id="content">
    <div id="content1">
        <ul>
            <li><a href="#">Stuff1</a></li><br />
            <li><a href="#">Stuff1</a></li><br />
            <li><a href="#">Stuff1</a></li>
        </ul>
    </div>
    <div id="content2" style="display:none;">
        <ul>
            <li><a href="#">Stuff2</a></li><br />
            <li><a href="#">Stuff2</a></li><br />
            <li><a href="#">Stuff2</a></li>
         </ul>
    </div>   
</div>

<script type="text/javascript">
    $('#button div').bind('click', function() {
        $('div#content div:visible').hide();
        $('div#content' + ($(this).index() + 1)).show();
    });
</script>
于 2012-11-11T22:26:04.910 回答