jQuery creating tabs with the tabheaders inside the tab itself

I am trying to create my own tabs in jQuery with the following code:

/* tabs */
var tabItems    = "";
var tabList     = "";
$(".Tabs .tab").each (
    function( intIndex ) {
            // get tabTitle to create tabNav list
            $(this).attr("id", "panel_"+intIndex);
            tabItems += "<li id='tab_"+intIndex+"'>" + $(".tabTitle", this).html() + "</li>";
        }
);开发者_开发问答
tabList = "<ul class='tabNav'>"+tabItems+"</ul>"; 
$(".Tabs").prepend(tabList);

$(".Tabs .tab").each (
    function( intIndex ) {
        $("#tab_"+intIndex).bind("click", function() {
                $(".Tabs .tab").length;
                for (i=0;i<=$(".Tabs .tab").length;i++) {
                        $("#panel_"+i).hide();
                    }                               
                $("#panel_"+intIndex).show();
        })
    }
);

I am not a jQuery goeroe, so please be gentle.

The html code for this code to work is:

<div class="Tabs">
    <div class="tab">
        <div class="tabTitle">tabtitle1</div>
        tabcontent1
    </div>
    <div class="tab">
        <div class="tabTitle">tabtitle2</div>
        tabcontent2
    </div>
</div>

CSS (stripped)

.Tabs {
    position: absolute;
    z-index:999;    
}
.Tabs .tab {
    position: absolute;
    display:none;
    z-index:999;    
    top: 35px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: white;
}
.Tabs .tab .tabTitle {
    display:none;
    color:white;
} 
/* Generated clickable tabs */
.Tabs ul.tabNav {
    margin: 0 5px;
}

.Tabs ul.tabNav li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    color: #e2e2e2;
    background: none;
}

.Tabs ul.tabNav li a {
    padding: 3px 10px;
    margin-left: 2px;
    border-bottom: none;
    text-decoration: none;
    color: #e2e2e2;
}

.Tabs ul.tabNav li a:link {
    color: #e2e2e2;
}
.Tabs ul.tabNav li a:visited {
    color: #e2e2e2;
}

.Tabs ul.tabNav li a:hover {
    color: #e2e2e2;
    background: #989898;
    background-image: none;
}

.Tabs ul.tabNav li.tabActive a {
    background-color: white;
    border-bottom: 1px solid #fff;
    color: black;
}

.Tabs ul.tabNav li.tabActive a:hover {
    color: #000;
    background: white;
    border-bottom: 1px solid white;
}

I definitly want to keep the titles where they are and not separated in a unordered list.

So far so good, i got them working. The problem (besides the messy code) is that the CSS for the generated tabtitles is not working. I cannot use live or delegate to do this I presume.

Anyone a solution or different approach?

Ok, this is what I've come up with. It looks like you are using anchors to style your tabs. This is weird because it will redirect if you click, but you have content display on the same page. So, I have set the href to # to stop this. Here I have added anchor tags to your titles, and added class to the tab you click on. Check out the fiddle:

http://jsfiddle.net/gUXyQ/7/

My second solution is were I have dropped the anchors entirely, and knocked out this css because it doesn't do anything. In fact it doesn't do anything initially because its setting it to the same colour as it was before.

.Tabs ul.tabNav li a:link {
    color: #e2e2e2;
}
.Tabs ul.tabNav li a:visited {
    color: #e2e2e2;
}

http://jsfiddle.net/EdbhV/1/

You may have other dependencies on your anchors, but this is the one I'd use. Use the one that best suits your needs. If you need anymore help, let us know.