altering tag for JavaScript

Question

how I utilize JavaScript to move the active link state to another link?

Please see codepen:

http://codepen.io/Krish1980/pen/mGfed

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">

$(function(){
$('#nav a').on('click',function(){
$('#nav li').removeClass('active');
$(this).parent().addClass('active');
   });
});
</script>

Include your code **in your question**, not only that but show an attempt of your own. — George, May 02 '13 at 17:09
js block is empty... write something inside and try again here ;) — stecb, May 02 '13 at 17:09
Please do a little research on your own. There's plenty of information online about manipulating element classes, like: [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — , May 02 '13 at 17:13
I did take the time to read the FAQ. I'm a beginner, and trying to learn some very simple JavaScript functions. I guess something she posted that says "beginners not welcome". Within one minute of asking a question you will be assaulted by everything that you did wrong. — Charles, May 02 '13 at 17:36

Stoop · Accepted Answer · 2013-05-02T18:27:42.407

//Wrap the click handler in DocumentReady so that the handler is 
//attached only after the elements have been loaded into the DOM
$(document).ready(function() {

    //Attach the click handler to all <li> elements that are under
    //the element with ID "nav"
    $("#nav li").click(function() {

        //Whenever one of the <li> elements is clicked, remove the
        //"active" class from any element that currently has it.
        $(".active").removeClass("active");

        //Add the "active" class to the element that triggered this function
        //(the <li> that was clicked)
        $(this).addClass("active");

    });

});

If you copy and paste this code into an .html file and open it with a browser, you will see it work the way you want it to:

<html>
<head>
<style>
body{background:#f9d867; margin:0; padding:0;}
#nav{display:block; background:#f5f5f5;  
-moz-box-shadow: 0 0 4px 0px #999;
-webkit-box-shadow: 0 0 4px 0px #999;
box-shadow: 0 0 4px 0px #999; margin:0; padding:40px 20px; list-style:none; text-align:center; }
#nav li{display:inline-block;}
#nav li a{display:block; padding:10px 15px; font:1em "Arial Black", Gadget, sans-serif; color:#444; text-decoration:none; text-transform:uppercase;}
#nav li a:hover{color:#999;}
#nav li.active a{background:#fff; 
-moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#nav li").click(function() {
      $(".active").removeClass("active");
      $(this).addClass("active");
   });
});
</script>
</head>
<body>
   <ul id="nav">
      <li>
         <a href="#">art</a>
      </li>
      <li>
         <a href="#">archive</a>
      </li>
      <li>
         <a href="#">about</a>
      </li>
      <li>
         <a href="#">blog</a>
      </li>
      <li class="active">
         <a href="#">contact</a>
      </li>
   </ul>
</body>
</html>

I did take the time to read the FAQ. I'm a beginner, and trying to learn some very simple JavaScript functions. I guess something she posted that says "beginners not welcome". Within one minute of asking a question you will be assaulted by everything that you did wrong. — Charles, May 02 '13 at 17:34
You need the Document Ready wrapper. This let's the click event get bound AFTER the elements have been fully registered with the DOM. Otherwise, depending on where the code is rendered in the markup, it's possible the Click event is being wired BEFORE the Nav elements are loaded into the DOM. — Stoop, May 02 '13 at 17:47
ok. However, if I remove the class from the , this CSS is gone and the function no longer works. I would like the active link to add that particular class when it is active, and then be removed when it goes to another link item. When I read your code it appears very clear. You are saying to get the document ready, look for the navigation list item, when the list item is clicked add the active class. Is my logic here correct? — Charles, May 02 '13 at 18:07
I've added comments to my answer to help explain what is happening. Does that make it a little more clear? — Stoop, May 02 '13 at 18:21
That is incredibly helpful. Thank you Joe. Learning online in a bubble can be challenging. Thanks for the time and thorough explanation. — Charles, May 02 '13 at 20:53

altering tag for JavaScript

1 Answers1