How to change active link styling [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 7 years ago.

Improve this question

http://jsfiddle.net/G8djC/2/

I'm trying to make a simple tabbed area where the content changes depending on tab clicked. The Javascript is a very basic function that changes the link class to active when clicked. I want the active tab to be a different color, but I can't get it to change past the first click.

I've already looked around a lot and can't seem to figure out why it doesn't quite work

CSS:

/* hide inactive tabs */
#content_2, #content_3, #content_4, #content_5 {
 display: none;
}

/* list styling */
ul.tabs li {
 list-style: none;
 display: inline-block;
}

/* inactive links */
ul.tabs li a {
 background-color: black;
 display: inline-block;
}

/* active links */
ul.tabs li a.active {
 background-color: pink;
 display: inline-block;
}

HTML:

<div class="all-interact">
<h1>Title</h1>

<div class="inner-interact">

    <ul class="tabs">
       <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
       <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
       <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_2">tab 3</a></li>
       <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_2">tab 4</a></li>
       <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_2">tab 5</a></li>
    </ul>


        <div class="tab-content" id="content_1">
            <p>tab 1 content</p>
        </div>

        <div class="tab-content" id="content_2">
            <p>tab 2 content</p>
        </div>

        <div class="tab-content" id="content_3">
            <p>tab 3 content</p>
        </div>

        <div class="tab-content" id="content_4">
            <p>tab 4 content</p>
        </div><!--content4-->

        <div class="tab-content" id="content_5">
            <p>tab 5 content</p>
        </div><!--content5-->

    </div>
</div>

Javascript:

function tabSwitch(new_tab, new_content) {

document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById('content_5').style.display = 'none';
document.getElementById(new_content).style.display = 'block';

document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById('tab_5').className = '';
document.getElementById(new_tab).className = 'active';

}

Answer 1

you have the same id for all your tabs. See fixed:

 <ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_5">tab 5</a></li>
</ul>

see fix here

Answer 2

All of the ids are tab_2 except the first:

<ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_2">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_2">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_2">tab 5</a></li>
</ul>

Change to:

<ul class="tabs">
   <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
   <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
   <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">tab 3</a></li>
   <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">tab 4</a></li>
   <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_5">tab 5</a></li>
</ul>

JSFiddle

Answer 3

You have the same ids #tab_2 for 4/5 anchor tags. I do silly stuff like that all the time. :)

One thing you can always do is run your markup through an HTML validator with a prebuilt template with all valid junk filled out all filled out to find these almost immediately.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>