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
Approach 1: Initially use removeClass() method to remove active class of previously appended data menu item. Then followed by addClass() method to add active class of currently appended data menu item. Now use each() function to append data with respect active class added or removed on click.
jQuery uses: . append(); and . remove(); functions to accomplish this task. We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document.
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>');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With