0

デフォルトのタブが表示されるようにしようとしています。別のタブをクリックすると、そのタブからクラスが削除され、クリックされたタブに移動します。

これが私が持っているHTMLです：

<div id="rightWrap">
    <div id="headStep"><span class="titleSub">Workers</span></div>
    <center>
    <br>
    <a href="../about/?s=architect"><table class="highlight">
    </table></a>
    <br>
    <a href="../about/?s=broker"><table class="">
    </table></a>
    <br>
    <a href="../about/?s=operator"><table class="">
    </table></a>
    <br>
    <a href="../about/?s=consultant"><table class="">
    </table></a>
    </center>
</div>

そしてJavaScript：

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
});
4

2 に答える 2

4

あなたのテーブルは兄弟ではありません。

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
        var $this = $(this);
        $this.parent().siblings('a').find('table').removeClass('highlight');
        $this.addClass('highlight');     
    });
});

ページのDoctypeがHTML5でない場合、テーブルを<a>要素でラップするとドキュメントが無効になることに注意してください。

于 2012-08-24T03:59:34.427 に答える
1

これに単純化できると思います。

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
        $('#rightWrap').find('.highlight').removeClass('highlight');
        $(this).addClass('highlight');     
    });
});

HTMLにもいくつかの深刻な作業が必要です。なぜ空のテーブル？

于 2012-08-24T04:23:09.910 に答える