Question

I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set “class= current” in the li section of the html code.But my doubt is whether I have to set “class=current” each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..

 <div id="tabsJ">
   <ul class="menu">
   <!-- CSS Tabs -->
     <li><a href="DataLog.aspx"><span>Reports</span></a></li>
     <li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
     <li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
     <li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>
   </ul>
 </div>

I have used this css

#tabsJ {
  float:left;
  width:100%;
  background:#F4F4F4;
  font-size:93%;
  line-height:normal;
      border-bottom:1px solid #24618E;
  }
#tabsJ ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
  }
#tabsJ li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabsJ a {
  float:left;
  background: url("../images/tableftJ.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 5px;
  text-decoration:none;
  }
#tabsJ a span {
  float:left;
  display:block;
  background:url("../images/tabrightJ.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#24618E;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
  color:#FFF;
  }
#tabsJ a:hover {
  background-position:0% -42px;
  }
#tabsJ a:hover span {
  background-position:100% -42px;
  }

    #tabsJ #current a {
            background-position:0% -42px;
    }
    #tabsJ #current a span {
            background-position:100% -42px;
            color:#FFF;
    }

Sam Warren – Added jsfiddle – http://jsfiddle.net/ejLTy/

Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.

Answer 1

No Need of JavaScript. Just change li as,

<li class="current"><a href="DataLog.aspx"><span>Reports</span></a></li>
<li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
<li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
<li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>

for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.

For hover use the pseudo element property in css called

your_division:hover