javascript - 如何在Javascript中按类和id添加和删除类

Question

首先我想找到哪个菜单ID有.show例如:<div id="menu1" class="show">Menu 2</div> 。

例如:如果#menu1有.show我想添加.showcontent到#content1，如果 .show移至#menu2我必须删除.showcontent来自#content1并添加.showcontent至#content2 .

function highlight() {
    var $c = $('.show');
        id = $c.attr('id');
    $('#' + id.replace('menu', 'content')).closest('tr').addClass('showcontent')
}
    highlight()

.showcontent {
    color: green;
}

<div id="menu0" class="hide">Menu 1</div>
<div id="menu1" class="show">Menu 2</div>
.....
<div id="menu10" class="hide">Menu 10</div>

<!--Content--> 
<table>
<tbody>
<tr><td id="content0">Menu 1 Content</td></tr>
<tr><td id="content1">Menu 2 Content</td></tr>
...
<tr><td id="content10">Menu 10 Content</td></tr>
</tbody>
</table>

非常感谢任何帮助，因为我花了很多时间来做这件事。谢谢。

Answer 1

有一种更好的方法可以做到这一点。您应该在菜单和内容之间建立某种链接，为此，我建议使用一些数据属性。例如:

<!--Menu--> 
<div class="menu" data-target="content1">Menu 1</div>
<div class="menu" data-target="content2">Menu 2</div>
.....
<div class="menu" data-target="content10">Menu 10</div>

<!--Content-->
<table>
<tr><td class="content" id="content0">Menu 1 Content</td></tr>
<tr><td class="content" id="content1">Menu 2 Content</td></tr>

<tr><td class="content" id="content10">Menu 10 Content</td></tr>
</table>

然后，您要做的就是查看哪个菜单元素具有 show 类，并显示具有与 data-target 对应的特定 id 的内容

$('#' + $('.menu').hasClass('show').attr('data-target')).addClass();

这将找到具有 show 类的类菜单元素，提取 id 并将其放入内容选择器中。

但是，我想当您想要做的是当您单击某个菜单项时，您想要显示该内容，对吗？那么:

$('.menu').on('click', function(){
  var contentID = $(this).data('target');
  $('#' + contentID ).addClass('showContent');
  // or you can even use toggleClass if you want to toggle the behavior
  $('#' + contentID ).toggleClass('showContent');
})

    $('.menu').on('click', function(){
      var contentID = $(this).data('target');
      $('#' + contentID ).toggle()
    })

.content {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Menu--> 
    <div class="menu" data-target="content1">Menu 1</div>
    <div class="menu" data-target="content2">Menu 2</div>
    .....
    <div class="menu" data-target="content10">Menu 10</div>
    
    <!--Content-->
    <table>
    <tr><td class="content" id="content1">Menu 1 Content</td></tr>
    <tr><td class="content" id="content2">Menu 2 Content</td></tr>
    
    <tr><td class="content" id="content10">Menu 10 Content</td></tr>
    </table>