Jquery click event on list of anchor

Question

I have created list of anchors.On clicking the link,I want to add CSS Class(using addClass) to the link I have clicked upon.

<ul id = "menu">
        <li id="mnuLectures" runat="server">
            <asp:HyperLink NavigateUrl = "~/Lectures.aspx" Text="Lectures" runat = "server" ID= "hypLectures" />
        </li>
        <li id="mnuBooks" runat="server">
            <asp:HyperLink NavigateUrl = "~/Books.aspx" Text="Books" runat = "server" ID= "hypBooks" />
        </li>
        <li id="mnuArticles" runat="server">
            <asp:HyperLink NavigateUrl = "~/Articles.aspx" Text="Articles" runat = "server" ID= "hypArticles" />
        </li>
        <li id="mnuQA" runat="server">
            <asp:HyperLink NavigateUrl = "~/QuestionAnswers.aspx" Text="Q & A" runat = "server" ID= "hypQA" />
        </li>
    </ul>

and JQuery,

$(document).ready(function () {
    $('#menu li a').click(function () {

        $(this).addClass('highlight');

    });
});

The jquery code is not working properly.I am not able to add CSS class to clicked anchor.. Am I missing something or the approach is wrong..Please suggest

Does clicking the link re-load the page, or is that prevented somehow? — David Thomas
– David Thomas, Commented May 25, 2014 at 17:16
Then your JavaScript won't run, because the browser loads a new page. — David Thomas
– David Thomas, Commented May 25, 2014 at 17:21
if so, you have to modify your HTML code using server-side scripting (to add the current class to the clicked element). — King King
– King King, Commented May 25, 2014 at 17:22
I am using this list of anchors in User Control(used as header).This user control is used in Master page.After clicking the link the browser is hitting the breakpoint at .click().Does it requires Server side handlers.. — Niranjan NT
– Niranjan NT, Commented May 25, 2014 at 17:30

dcodesmith · Accepted Answer · 2014-05-25 17:50:49Z

1

you have to remove from the first selected as well before applying to the clikced one:

$(document).ready(function () {

    $('#menu li a').click(function (event) {

        $('#menu li a').removeClass('highlight');
        $(this).addClass('highlight');

        event.preventDefault(); // stop default event to stop reloading of page

    });

});

edited May 25, 2014 at 17:50

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

answered May 25, 2014 at 17:16

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nelfo · Accepted Answer · 2014-05-27 18:36:17Z

0

You need to add event.preventDefault() to the click event. Try this:

http://jsfiddle.net/xec4a/

$('#menu li a').click(function (e) {
    e.preventDefault();    
    $(this).addClass('highlight');
    alert('class added');
});

edited May 27, 2014 at 18:36

answered May 25, 2014 at 17:18

Nelfo

3,8547 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

Jquery click event on list of anchor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related