SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding a class with DOM

    I know you can add classes with DOM, but specifically what I want to do is when a link is clicked I want to add a class that will style it as being "active" since a:active only lasts for the moment it is clicked.

    Basically I would want something like this:

    One of the links will default to "active"

    HTML Code:
    <a href="#" class="active">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
    Then when another link is clicked the class would be removed from Link 1 and added to the clicked link


    HTML Code:
    <a href="#">Link 1</a> | <a href="#" class="active">Link 2</a> | <a href="#">Link 3</a>
    Hope this makes sense.

    Thanks

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to access them all somehow via the DOM. I'll assume they're in a container of some sort and that it has the id "nav".
    Code javascript:
    var navlinks = document.getElementById('nav').getElementsByTagName('a');
    for (var i = 0, j = navlinks.length; i < j; i++) {
      navlinks[i].onclick = activate;
    }
    function activate() {
      for (var i = 0, j = navlinks.length; i < j; i++) {
        navlinks[i].className = '';
      }
      this.className = 'active';
    }

  3. #3
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Raffles,

    Thanks for the help! However, I think I am doing something wrong. Below is the code that you wrote that I have included into a test page. I am going to continue to work on this. But maybe you or someone else can take peek.

    Thanks

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>Untitled Document</title>
    		<style>
    			.active {
    				text-decoration: none;
    				color: #F00;
    			}		
    		</style>
    		<script type="text/javascript">
    			var navlinks = document.getElementById("nav").getElementsByTagName("a");
    			for (var i = 0, j = navlinks.length; i < j; i++) {
    			  navlinks[i].onclick = activate;
    			}
    			function activate() {
    			  for (var i = 0, j = navlinks.length; i < j; i++) {
    			    navlinks[i].className = '';
    			  }
    			  this.className = 'active';
    			}
    		</script>
    	</head>
    	<body>
    		<div id="nav">
    			<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
    		</div>
    	</body>
    </html>

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is a common problem that took me a while to get my head around. When the browser loads the page, it parses the javascript you put in the head. But when it's doing that, #nav doesn't exist yet because it hasn't got that far with its parsing yet. So you have to tell the browser to wait until it's loaded the rest of the page before parsing that part of your javascript. The solution is to do it "onload":
    Code Javascript:
                function init() {
                var navlinks = document.getElementById("nav").getElementsByTagName("a");
                for (var i = 0, j = navlinks.length; i < j; i++) {
                  navlinks[i].onclick = activate;
                }
            }
            function activate() {
                  for (var i = 0, j = navlinks.length; i < j; i++) {
                    navlinks[i].className = '';
                  }
                  this.className = 'active';
            }
            window.onload = init;
    Also, you should put all that in an external JS file, then the browser can cache it and you keep your HTML less cluttered.

  5. #5
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. Sorry to be a pain but I still can't get it work. In addition to what you wrote I also tried calling the init() from the body. I removed that though in the example below. I was also getting an error because the activate() did not know what navlinks was, so I passed it to that function. However, it is still not working. Any ideas? Thanks for all your help

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>Untitled Document</title>
    		<style>
    			.active {
    				text-decoration: none;
    				color: #F00;
    			}		
    		</style>
    		<script type="text/javascript">
    			function init() {
                var navlinks = document.getElementById("nav").getElementsByTagName("a");
                for (var i = 0, j = navlinks.length; i < j; i++) {
                  navlinks[i].onclick = activate(navlinks[i]);
                }
            }
            function activate(navlinks) {
                  for (var i = 0, j = navlinks.length; i < j; i++) {
                    navlinks[i].className = '';
                  }
                  this.className = 'active';
            }
           window.onload = init;
    		</script>
    	</head>
    	<body>
    		<div id="nav">
    			<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
    		</div>
    	</body>
    </html>

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, here, this works:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Untitled Document</title>
            <style>
                .active {
                    text-decoration: none;
                    color: #F00;
                }        
            </style>
            <script type="text/javascript">
              var navlinks;
                function init() {
                navlinks = document.getElementById("nav").getElementsByTagName("a");
                for (var i = 0, j = navlinks.length; i < j; i++) {
                  navlinks[i].onclick = activate;
                }
            }
            function activate() {
                  for (var i = 0, j = navlinks.length; i < j; i++) {
                    navlinks[i].className = '';
                  }
                  this.className = 'active';
            }
           window.onload = init;
            </script>
        </head>
        <body>
            <div id="nav">
                <a href="#" class="active">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
            </div>
        </body>
    </html>

  7. #7
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice!!! Thanks that's great!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •