Question

首先，我想找到哪个菜单ID .show ex：<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>

{{1}}

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

Answer 1

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

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

Answer 2

<script>
var id = document.getElementsByClassName("show")[0].id;
var menu_number = id.split("menu");
var existing_show_content = document.getElementsByClassName("show-content")[0];

if (existing_show_content) {
    existing_show_content.className = "";
}
document.getElementById("content"+menu_number[1]).parentNode.className = "show-content";
</script>

<!-- language: lang-html -->

<!--Menu--> 
<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>
<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>
</table>

<!-- end snippet -->

如何添加＆amp;按班级删除班级＆amp;在Javascript中的id

2 个答案: