单击Jquery更改类

我把一个有侧边栏的页面放在一起，当你点击侧边栏中的菜单时，它会显示/隐藏div

侧面的菜单使用以下代码：

<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>

节目组1
节目组2
节目组2

主要内容是使用此代码：

<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>

内容组1
内容组2
内容组3

使用的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>

$（函数（）{
$（'#showdiv1'）。单击（函数（）{
$（'div[id^=div]'）。hide（）；
$（'#div1'）.show（）；
});
$（'#showdiv2'）。单击（函数（）{
$（'div[id^=div]'）。hide（）；
$（'#div2'）.show（）；
});
$（'#showdiv3'）。单击（函数（）{
$（'div[id^=div]'）。hide（）；
$（'#div3'）.show（）；
});
});

它完全按照我的要求做，但有一件事。我只想在用户选择要显示的部分时突出显示菜单中的

a

。我的想法是对所选项目使用

.selected

而不是

.button

。我可以为第一个项目设置

.selected

，该项目看起来很酷，但我希望在您更改

.selected

链接时移动到实际选择的项目。我怎样才能做到这一点。我已经读了一些指南，但它并不完全是我想要的或它不工作

我真的很感谢你在这方面的帮助

---

谢谢

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

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

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

---

基本思想就在这里，几乎不需要重构：

---

您应该按照建议尝试重构代码，然后添加新功能。下面是一个简短的片段（html稍作修改）：

---

还有一个正在运行的小提琴演示

你应该首先重构你的代码你的HTML使用相同的id两次。。。也许是复制/粘贴问题？太棒了-做了我想做的-非常感谢你。喜欢它。生成的代码大约有20行，并且在演示中只处理3个div，如果你想添加更多div，你可以添加更多可能呈指数增长的代码。使用Beatter的答案或我自己的答案中的代码将看到一个更加模块化、简洁的代码库。

$('.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');
}

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