Home › Forums › JavaScript › Dealing with preventDefault
- This topic is empty.
-
AuthorPosts
-
December 17, 2011 at 5:09 am #35691
Opariti
MemberI 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.December 17, 2011 at 11:21 am #92959Opariti
MemberI’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.
December 17, 2011 at 12:21 pm #92964jamygolden
MemberI’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.
December 17, 2011 at 2:13 pm #93000Opariti
Member@jamy_za. Yes thanks, I wonder why the method was put there, that misled me. Is nice your code shortcut.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.