js制作tab标签切换特效



61 241 81



特效描述: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

加群请备注:从官网了解到