How to add & remove class by class & id in Javascript

Question

First i want to find which one of menu id has .show ex: <div id="menu1" class="show">Menu 2</div> .

Ex: If #menu1 have .show i want to add .showcontent to #content1, if .show moved to #menu2 i have to remove .showcontent from #content1 and add .showcontent to #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> 

Any help highly appreciated because i spend lot of time to do this. Thank you.

Answer 1

there is a much and better way to do this. You should have some kind of link between both and the menu and content, to do so, i suggest having some data-attribute . for example:

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

then, what you want to do is to see what menu element has the show class and show the content with a specific id that corresponds to the data-target

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

this will find the element of class menu that has the show class, extract the id and put it in a selector for content.

However, i guess when you want to do is when you click on some menu item, you want to show that content, right ? then:

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