Question

我已将一个带侧边栏的页面组合在一起，当您单击侧边栏中的菜单时，它会显示/隐藏div。

http://www.prostatecymru.com/prostate/

侧面的菜单正在使用这段代码：

<div class="buttons">
    <ul id="menu-profile" class="menu">
        <li><a class="button" id="showdiv1">Show Div 1</a></li>
        <li><a class="button" id="showdiv2">Show Div 2</a></li>
        <li><a class="button" id="showdiv2">Show Div 2</a></li>
    </ul>
</div>

主要内容是使用此代码：

<div id="div1">
    Content Div 1
</div>
<div id="div2" style="display: none;">
    Content Div 2
</div>
<div id="div3" style="display: none;">
    Content Div 3
</div>

使用的jQuery是：

<script type="text/javascript">
    $(function() {
        $('#showdiv1').click(function() {
            $('div[id^=div]').hide();
            $('#div1').show();
        });
        $('#showdiv2').click(function() {
            $('div[id^=div]').hide();
            $('#div2').show();
        });
        $('#showdiv3').click(function() {
            $('div[id^=div]').hide();
            $('#div3').show();
        });
    });
</script>

它完全按照我的要求完成但有一件事。我只想在用户选择要显示的部分时突出显示菜单中的a。我的想法是在所选项目上使用.selected而不是.button。我可以设置.selected作为第一个看起来很酷的项目，但是当我更改.selected的链接以移动到实际选择的项目时我想要。我怎样才能做到这一点。我已经阅读了一些指南，但这不完全是我想要的，或者它不起作用。

我真的很感激你的帮助。

由于

Answer 1

只需使用您用来显示/隐藏div的相同方法：

$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').show();

    $('a[id^=showdiv]').removeClass('selected');
    $(this).addClass('selected');
});

Answer 2

基本的想法就在那里，几乎没有重构：

http://jsfiddle.net/s7E3z/

$('.menu a').on('click', function(e) {
    e.preventDefault();
    showdiv(this);
    $('.menu a').removeClass('selected');
    $(this).addClass('selected');
});

$('.menu a:eq(0)').click();

function showdiv(sender) {
    var idTarget = sender.id.replace('show','');
     $('.container div').removeClass('selected');
    $('#'+idTarget ).addClass('selected');
}

Answer 3

您应该尝试，如烤所示，重构您的代码，然后添加新功能。这是一个快速片段（html略有改动）：

$(".button").click(function() {
    var idNumber = $(this).attr("id").replace("show", "");
    $(".display").hide();
    $("#div" + idNumber).show();
    $(".button").removeClass("selected");
    $(this).addClass("selected");
});

和工作小提琴演示here

点击时Jquery更改类

3 个答案: