Jquery - Change color of link -


i have following:

     <div id="libdiv" class = "libraryheader ">          <a href="#"  class="libraryheader" id="videolink"  /> videos </a>          | <a  href="#" class="libraryheader"  id="articlelink" /> articles </a>           | <a href="#" id="newslink" class="libraryheader"  /> news </a>      </div>  

when click on link, like color of link turn gold while other links grey.

    .libraryheader      {          font-family: sans-serif;         font-size: 24px;         color: #4f5a5e;  /* grey color */          text-decoration: none;      }      .libraryheaderselected     {        font-family: sans-serif;       font-size: 24px;       color: gold;       text-decoration: none;     } 

what happening when select links, turn gold when selected link, prevously selected remains gold , not turn grey. selected link gold. others should default grey.

here code have:

 $('#libdiv a').click(function () {              $(this).removeclass('libraryheaderselected');             $('#videolink').addclass('libraryheader');             $('#articlelink').addclass('libraryheader');             $('#newslink').addclass('libraryheader');              $(this).addclass('libraryheaderselected');                        }); 

first of all, there's no need add or remove libraryheader class of links. html elements can have more 1 class @ time. means links can keep libraryheader class, while toggle secondary class (selected, example) specifies text color.

so need js this:

$('#libdiv a').click(function () {     $('#libdiv a.selected').removeclass('selected');     $(this).addclass('selected'); }); 

also, css redundant. need this:

 .libraryheader  {      font-family: sans-serif;     font-size: 24px;     color: #4f5a5e;  /* grey color */      text-decoration: none;  }  .libraryheader.selected {     color: gold; } 

Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -