如何在Javascript中按類和ID添加和刪除類

Question

首先，我想查找菜單ID中的哪個具有菜單.show ： <div id="menu1" class="show">Menu 2</div> 。

例如：如果＃menu1具有.show我想將.showcontent添加到＃ .showcontent ，如果.show移至#menu2我必須從#content1 .showcontent中刪除.showcontent並將.showcontent添加到#content2 .showcontent 。

 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

有一種更好的方法可以做到這一點。 您應該在菜單和內容之間都建立某種聯系，為此，我建議您提供一些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 -->