Dealing with preventDefault

[Opariti]

I have lately implemented one of the tricks of this great site concerning the tabs with rounded borders – Tabs with round out borders. The JavaScript implementation, as shown below, disables the default event handling behavior of the element, including the ‘href=’ and ‘onclick=’ events.
Here is the code:

$(function() {

$("li").click(function(e) {

e.preventDefault();

$("li").removeClass("active");

$(this).addClass("active");

});

});

I am using the tabs to fire GET requests to the server so that the PHP scripts there assemble each time new pages. Of course, each page includes the menu with my tabs, which needs to have the rending persistance as per the user’s choice (it’s about color change on click). The ‘li’ element’s selection, to be styled according to the CSS file, is identified by the “class=’active’” attribute, as above.
I am looking for a handy and elegant solution to adapt the above code so that to be able to send my GET request to the server when clicking on the tab, while keeping the scope of the article regarding the styling construction.
Unfortunately, because of my superficial knowledge of the jQuery library I can find ways to do the scope but that would seriously change the spirit of Chris solution.
Thanks for any hint.

[Opariti]

I’ve solved it by getting rid of the preventDefault method and by saving, on click, the selection id through session storage + executing the above code (minus the e.preventDefault()) in the document.ready of the page.

[jamygolden]

I’m not 100% sure what you’re trying to achieve, but based on your javascript I would do this:

$(function() {

$("li").click(function() {

$(this).addClass('active').siblings().removeClass('active');

});

});

preventDefault() isn’t necessary on a list item.

[Opariti]

@jamy_za. Yes thanks, I wonder why the method was put there, that misled me. Is nice your code shortcut.

[Author]

Posts