I have a highlighting function using JQuery, that changes the css for the clicked <li>
element in a menu. The function also prepends a pair of left brackets << to serve as pseudo arrows.
But how do I remove that << when I switch to the next <li>
?
$(".sdv-nrml").click(function(){
//remove old highlighted li
$(".sdv-nrml").css({'background' : '#ffcc66' , 'color' : '#000000' , 'text-align' : 'right'});
//assign new css and prepend arrow
$(this).css({'background' : '#996600' , 'color' : '#ffff66' , 'text-align' : 'left'});
$(this).prepend("<< 开发者_开发百科");
});
Thanks
I would include the <<
in a <span>
:
$(this).prepend('<span class="prepended">« </span');
then to remove:
$(".prepended").remove();
Note: I used « instead of <<. I find it a little more appealing.
Wrap it in a span
with a class
and remove that.
$(this).prepend('<span class="pseudo-arrow"><<</span>');
why you don user a class for the selected state? .selected-item { background: #ffcc66; color: #000; text-align:right; }
So your script can be used like that:
$(".sdv-nrml").click(function(){
//remove old highlighted li
$(".sdv-nrml").each(function(){
$(this).removeClass("selected arrow");
});
//assign new css and prepend arrow
$(this).addClass("selected");
$(this).prepend("<span class='arrow'><<</span> ");
});
精彩评论