Question

有人可以花点时间查看一下，让我知道我的代码出错了吗？

出于某种原因，单击按钮时内容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>

Answer 1

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

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

Answer 2

大卫·穆勒认为按钮选择器是个问题。

链接上的事件没有发生切换，因为链接的索引将为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>

在div中动态更改文本

2 个答案: