Question

I have a jQuery tab script that gets content from a PHP file defined by the link and parses it to a div element. When the page loads up, a tab is already selected and the user can select an alternative one. However, when you click anywhere other than on a tab, the selected tab is removed. Why could this be?

This is my current jQuery code:

function load(url){
    $.ajax({
        url:url,
        success:function(message){
            $("#content").html(message);
        }
    });
}

$(document).ready(function(){
    $("[id]").click(function(){
        type=$(this).attr("id");
        url=""+type+".php";
        $("[id]").removeClass("selected");
        $("#"+type).addClass("selected");
        load(url);
        return false;
    });
    $("#tab1").click();
});

This is my HTML code:

<ul> 
<li><a id="tab1" href="javascript:void(null);">Tab1</a></li> 
<li><a id="tab2" href="javascript:void(null);">Tab2</a></li> 
<li><a id="tab3" href="javascript:void(null);">Tab3</a></li> 
</ul>

Answer 1

The jquery selector says to target all elements with an id tag. Any element on the page with an id tag will have the click handler assigned. It’s either that, or the fact that in javascript, all elements have an id attribute. It is just usually set to null/empty. So the selector essentially targets all tags. In the end, it is roughly the same thing. I would suggest making a convention (like you already have) and start each tab with a word like tab_ and then in the jquery selector use something like [id^="tab_"]. Then the selector will get all elements that start with tab_.