js制作tab標簽切換特效



63 251 84



特效描述:js制作 tab標簽 切換特效,js制作tab標簽切換特效

代碼結構

1. HTML代碼

<!--代碼部分begin-->
<div id="menu">
<!--tag標題-->
    <ul id="nav">
        <li><a href="#" class="selected">jQuery特效</a></li>
        <li><a href="#" class="">tab切換</a></li>
        <li><a href="#" class="">菜單導航</a></li>
    </ul>
<!--二級菜單-->
    <div id="menu_con">
        <div class="tag" style="display:block">
            這里是jQuery特效內容列表
         </div> 
        <div class="tag" style="display:none">
            這里是tab切換效果   
         </div> 
        <div class="tag"  style="display:none">
            這里是菜單導航效果
        </div> 
</div>
</div>
<script>
var tabs=function(){
    function tag(name,elem){
        return (elem||document).getElementsByTagName(name);
    }
    //獲得相應ID的元素
    function id(name){
        return document.getElementById(name);
    }
    function first(elem){
        elem=elem.firstChild;
        return elem&&elem.nodeType==1? elem:next(elem);
    }
    function next(elem){
        do{
            elem=elem.nextSibling;  
        }while(
            elem&&elem.nodeType!=1  
        )
        return elem;
    }
    return {
        set:function(elemId,tabId){
            var elem=tag("li",id(elemId));
            var tabs=tag("div",id(tabId));
            var listNum=elem.length;
            var tabNum=tabs.length;
            for(var i=0;i<listNum;i++){
                    elem[i].onclick=(function(i){
                        return function(){
                            for(var j=0;j<tabNum;j++){
                                if(i==j){
                                    tabs[j].style.display="block";
                                    //alert(elem[j].firstChild);
                                    elem[j].firstChild.className="selected";
                                }
                                else{
                                    tabs[j].style.display="none";
                                    elem[j].firstChild.className="";
                                }
                            }
                        }
                    })(i)
            }
        }
    }
}();
tabs.set("nav","menu_con");//執行
</script>
<!--代碼部分end-->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子