CODEWITHSUNDEEP
javascripthtmlcss
Phil Morley
Phil Morley

Reputation: 33

Adding a class to a list element

I am trying to add an active class to a list element and cannot work out why this method isn't working Any guidance will be greatly appreciated. Please see my code below.

Here's the HTML

<ul class="Menu">
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab1','tab1text')">Menu Item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab2','tab2text')">Menu item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab3','tab3text')">Menu Item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab4','tab4text')">Menu Item</a></li>
</ul>

And CSS with the classes

.tab {
color:;
background-color:;
font-family: 'Roboto', sans-serif;
} 

.active {
color: #00ffff;
}

And the Javascript function

<script>
function showContent(obj, content, text)
obj.className += " active";
</script>

Here is a JSfiddle as well https://jsfiddle.net/wxjop98f/1/

I can't work out why this doesn't work as various tutorials state this method. Many thanks for any help provided.

Upvotes: 2

Views: 239

Answers (5)

Mohammad Javed
Mohammad Javed

Reputation: 11

Just change your javascript as follows, you just missed curly braces

<script>
function showContent(obj, content, text)
{
obj.className = "active";
}
</script>

Upvotes: 1

Dekel
Dekel

Reputation: 62536

Several problems:

  1. You need to make sure that the javascript block in jsfiddle is loaded in the <head> (no wrap)
    enter image description here
  2. The function block should be wrapped in {...}
  3. It's better to use obj.classList.add (although obj.className += ' active' will work too.
  4. If you want the color on the .active to work on the <a> elements you should use a.active (otherwise the anchor's color definition will get higher priority).

Here is the fix:
https://jsfiddle.net/54w6ntx7/

And a complete snippet:

function showContent(obj, content, text) {
  //debugger;
  obj.classList.add("active");
}
a:link{
  color: inherit;
  text-decoration: inherit;
}
a:visited{
  color: inherit;
}
a:active{
  color: inherit;
}

.tab {
  color:;
  background-color:;
  font-family: 'Roboto', sans-serif;
} 

a.active {
  color: green;
} 
<ul class="Menu">
	<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab1','tab1text')">Menu Item</a></li>
    <li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab2','tab2text')">Menu item</a></li>
    <li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab3','tab3text')">Menu Item</a></li>
	<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab4','tab4text')">Menu Item</a></li>
    </ul>

Upvotes: 6

Jaydeep Pedhadiya
Jaydeep Pedhadiya

Reputation: 534

You have put onclick function in anchor tag <a> and you are putting active class on <a> so please put onclick function on <li> tag instead of <a>.

Upvotes: 0

Brad
Brad

Reputation: 8668

You are missing the {} for your function:

function showContent(obj, content, text){
    obj.className += " active";
}

https://jsfiddle.net/BradChelly/wxjop98f/4/

Upvotes: 1

Naghaveer R
Naghaveer R

Reputation: 2944

function showContent(obj, content, text) {
  if (obj.className.indexOf("active") < 0)
    obj.className += " active";
}
.tab {
  color: ;
  background-color: ;
  font-family: 'Roboto', sans-serif;
}
.active {
  color: #00ffff;
}
<ul class="Menu">
  <li class="tab" style=""><a href="javascript:void(0)" onclick="showContent(this,'tab1','tab1text')">Menu Item</a>
  </li>
  <li class="tab" style=""><a href="javascript:void(0)" onclick="showContent(this,'tab2','tab2text')">Menu item</a>
  </li>
  <li class="tab" style=""><a href="javascript:void(0)" onclick="showContent(this,'tab3','tab3text')">Menu Item</a>
  </li>
  <li class="tab" style=""><a href="javascript:void(0)" onclick="showContent(this,'tab4','tab4text')">Menu Item</a>
  </li>
</ul>

Upvotes: 0

Related Questions