To begin, assign a specific class to all target elements (in this case, we will use class1)
<style>
.selected{
background-color:green;
}
</style>
<ul id="menu">
<li class="class1 current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></li>
<li class="class1 current_page_item1"><a class="button" id="showdiv2"><span>Experience</span></a></li>
<li class="class1 current_page_item2"><a class="button" id="showdiv3" ><span>Vision</span></a></li>
<li class="class1 current_page_item3"><a class="button" id="showdiv4" ><span>Portfolio</span></a></li>
<li class="class1 current_page_item4"><a class="button" id="showdiv5"><span>Social</span></li>
<li class="class1 current_page_item5"><a class="button" id="showdiv6"><span>About me</span></a></li>
</ul>
Next, you can remotely access specific items by their class name
Important Note:
Remember to include JavaScript code after the HTML content.
var element = document.getElementByTagName('class1'),i,j;
for(i in element){
element[i].onclick = function() {
this.className = this.className + ' selected';
for(j in element){
element[j].className = str.replace(" selected", "");
}
}
}
Here's a suggestion:
There are many JavaScript frameworks available that can assist you with this task
If you want a faster and easier way to implement JavaScript, consider using jQuery
Here's the same functionality with jQuery:
$(document).ready(function() {
$('#menu li').click(function() {
$('#menu li').removeClass('.selected');
$(this).addClass('.selected');
});
});