Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using Javascript to change style

    i have a website that should dynamically change when a link is clicked. the css i use for the links is as following:
    Code:
    div#nav a {
    	display:block;
    	color:#1084aa;
    	text-decoration:none;
    	padding:.3em 1em;
    	margin:0 0 2px;
    	font:1.2em bold;
    	text-align:center;
    	}
    	
    div#nav a:hover {
    	color:#000000;
    	background-color:#1084AA;
    	}
    a sample link in the xhtml looks like this:
    Code:
    <a href="#" onclick="changeTab('home','hcontent');" id="home">Home</a>
    the javascript that applies here looks like this:
    Code:
    var lastTab = "home";
    function changeTab(tab,section){
    	document.getElementById(lastTab).innerHTML = 
    	document.getElementById(lastTab).style.color="#1084AA";
    	document.getElementById(tab).style.backgroundColor="#1084AA";
    	document.getElementById(tab).style.color="#000000";
    	lastTab = tab;
    	document.getElementById('content').innerHTML = document.getElementById(section).innerHTML;
    }
    this works fine and everything is amazing but after a link is clicked and then another one is, the css hover effects no longer work because the element has the javascript style applied to it.

    what would be the best way to "reset" the element's style to revert back to the css style so the hover will work?

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    define css classes, and you can easily switch them back and forth as needed.
    plus you don't have to code all those pesky DOM-style css attributes.

    Code:
    element.className="orig"
    element.className="lastUsed"
    element.className="orig"

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks a bunch! i had never thought that classes could be used in that way. thanks again


  •  

    Posting Permissions

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