0

我已经整理了一个带有侧边栏的页面，当您单击侧边栏中的菜单时，它会显示/隐藏 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以移动到实际选择的项目时我想要。我怎样才能做到这一点。我已经阅读了一些指南，但这并不是我想要的，或者它不起作用。

我真的很感激这方面的一些帮助。

谢谢

4

3 回答 3

1

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

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

    $('a[id^=showdiv]').removeClass('selected');
    $(this).addClass('selected');
});
于 2012-11-14T09:42:24.313 回答
0

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

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');
}
于 2012-11-14T09:52:58.730 回答
0

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

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

和一个工作小提琴演示在这里

于 2012-11-14T09:53:16.170 回答