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
Post a Comment