开发者

Tab View in PHP using Mootools

I would like to create a tab view just by hide and show div element with mootools.I am stucked by using mootools and got confused.

Following list generated dynamically from php and we can't guess the element id. When we are click on each list item; it should apply the active class for the same and remove active class from current list item.

开发者_JS百科
<div class="lorem_ipsum">
<div class="lorem">
    <ul id="main_tabs">
        <li id="815" class="active" onclick="tabManage()">Lorem Ipsum</li>
            <li id="816" onclick="tabManage()">John</li>
            <li id="817" onclick="tabManage()">Lorem Text</li>
        <li id="818" onclick="tabManage()">Demo Text</li>
    </ul>
</div>

<script language="javascript">
 function tabManage()
 {

$('815').addClass = "active";

$('816').removeClass = "active";

$('817').removeClass = "active";

$('818').removeClass = "active";
}
</script>

How can we apply a loop in the javascript. Please any body can help me to write javascript script function for same.Thanks in advance


here's your quick tabs in 10 mins in mootools (best viewed in FF due to quick CSS3 styling): http://www.jsfiddle.net/dimitar/THQWn/

(function() {
    // closure - to be run in a domready block.
    var tabs = document.id("main_tabs").getElements("li");
    var output = document.id("output"), divs = output.getChildren();

    tabs.addEvents({
        click: function(e) {
            // clear up all tabs of 'active'
            tabs.removeClass("active");
            // make this active and remove the mouseover effect
            this.addClass("active").removeClass("over");

            // make all content hidden
            divs.addClass("hide");

            // remove hidden class from the div that links to our id.
            output.getElement("div[rel=" + this.get("id") + "]").removeClass("hide");
        },
        mouseenter: function() {
            if (!this.hasClass("active"))
                this.addClass("over"); // not applicable to active
        },
        mouseleave: function() {
            this.removeClass("over");
        }
    });

})();

note that i am doing some slight changes in the markup but it ought to be enough to get you started

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜