Modifying list element CSS with Javascript

Discussion in 'JavaScript' started by ChaosFoo, Jan 17, 2008.

0
  1. #1
    I'm working on a site that is going to have tabs similar to those you can find on the product pages of newegg.com.

    I'm wondering if I can make changes to a specific <li> elements CSS with Javascript. Normally, I use and ID to select the element that I am going to modify, and then use the javascript to define CSS styles, but I would like to stay away from assigning each tab an ID, because the tabs may be different on different pages.

    I have uploaded a picture of what I am looking for. If anyone can point me in the right direction, It would be very helpful.

    If you need to look at the HTML here it is:

    

<style type="text/css">
<!--
body {
	margin:0;
	padding:0;
}

p {
	font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding:4em 0 0 2em !important
}

img {
	display:block;
	margin-top:1em
}

/*
*		Navigation
-------------------------------------------------------------*/
#specs {
	font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
	background:#ffffff;
	width:100%;
}

#specs ul {
	margin:0;
   	list-style:none;
	padding:0;
}

#specs a, #specs strong, #specs span {
	float:left;
   	display:block;
	color:#000000;
	padding:13px 19px 13px 11px;
	background: url(images/specs.png) no-repeat 100% bottom;
	text-decoration:none
}

#specs li {
   float:left;
   background:url(images/specs.png) no-repeat left bottom;
   margin:0px 3px;
   padding:0 0 0 9px;
}
#specs #current {
   background:url(images/specs.png) no-repeat 0 top;
   margin:0px !important;
}

#specs #current a {
        background:url(images/specs.png) no-repeat 100% top;
	padding:13px 20px 13px 11px;
	color:#000000;
}

#specs a:hover {
	color:#464724
	}
	
.prodInfo {
          width:97%;
          border:solid #FF9A03 4px;
          position:relative;
}
-->
</style>
<script type="text/JavaScript">



</script>
</head><body>

<div id="specsContainer">
  <div id="specs">
      <ul>
        <li><a href="#">Description</a></li>
        <li id="current"><a href="#">Features</a></li>
        <li><a href="#">Specifications</a></li>
      </ul>
      <br style="clear:both;"/>
  </div>
  <div class="prodInfo">
    <p>Created with this single image:<img src="images/specs.png" alt="Tab Image for navigation"></p>

  </div>
</div>
</body></html>
    Code (markup):
     

    Attached Files:

    ChaosFoo, Jan 17, 2008 IP
  2. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #2
    I am not sure how you will identify specific list elements but you can get them all ..the best thing is to make a new css className to use....basic example

    <script language="javascript">

    function findTagType(tag)
    {
    var myelements = document.getElementsByTagName(tag);
    for (var i=0; i < myelements.length; i++)
    {
    myelements.className = 'newClass';
    or
    myelements.style.color = '#666666'

    }
    }
    findTagType("li");
     
    mjamesb, Jan 18, 2008 IP