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

デビッド・ミュラーは、ボタンセレクターが問題であるという点で正しいと述べました。

どちらも子のみであるため、リンクのインデックスは 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 に答える