js 无插件选项卡支持自动改变选中项

最新推荐文章于 2018-10-31 18:25:15 发布

hch126163

最新推荐文章于 2018-10-31 18:25:15 发布

阅读量1.7k

点赞数

分类专栏： html/js 文章标签： function div class tabs xhtml string

本文链接：https://blog.csdn.net/hch126163/article/details/6050485

版权

html/js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>选项卡</title>
    <style type="text/css">
    *{margin:0px;padiving:0px;}
    body{ padiving:0;font:12px "宋体"; height:100%; width:100%; }
    ul,li{ list-style-type:none;padding:0px;}
    .tabHeads{width:962px;height:31px;margin:100px auto 0px;background-color:#31E2B7; }
    .tabContents{width:960px;height:auto;margin:0px auto; border:1px solid #333;padding:0px; }
    .tabContents div{height:198px;line-height:25px;width:auto;padding:5px;overflow:auto;background-color:#eff;}
    .tabs{width:100px;height:25px;line-height:25px;margin:5px 2px 0px;border:1px solid #333;border-BOTTOM:none;text-align:center;display:inline;float:left;}
    .curTab{color:red;background-color:#eff; MARGIN-BOTTOM: -2px; POSITION: relative; height:26px;}
</style>
</head>
<body>
      <div class="tabHeads" id='tabHeads'>
            <ul>
                <li style="margin-left:50px;">新闻1</li>
                <li >新闻2</li>
                <li >新闻3</li>
                <li >新闻4</li>
                <li >新闻5</li>
                <li >新闻6</li>
            </ul>
        </div>
        <div id="tabContents" class="tabContents">
            <div >
                <textarea   rows=3 cols="20"></textarea>新闻1
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20">234656</textarea>新闻2a2
            </div>
            <div style="display:none;" >
                <textarea rows=3 cols="20"></textarea>新闻3a3
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20"></textarea>新闻4
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20">234656</textarea>新闻5
            </div>
            <div style="display:none;">
                <textarea rows=3 cols="20"></textarea>新闻6
            </div>
        </div>

     <div class="tabHeads" id='tabHeads1'>
            <ul>
                <li style="margin-left:50px;">新闻1</li>
                <li >新sdfgsdfg闻2</li>
                <li >新闻3</li>
                <li >新sdfg闻4</li>
                <li >新sdfgs闻5</li>
                <li >新sdfg闻6</li>
            </ul>
        </div>
        <div id="tabContents1" class="tabContents">
            <div >
                <textarea   rows=3 cols="20"></textarea>新闻1
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20">234656</textarea>新闻2a2
            </div>
            <div style="display:none;">
                <textarea rows=3 cols="20"></textarea>新闻3a3
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20"></textarea>新闻4
            </div>
            <div style="display:none;">
                <textarea   rows=3 cols="20">234656</textarea>新闻5
            </div>
            <div style="display:none;" >
                <textarea rows=3 cols="20"></textarea>新闻6
            </div>
        </div>

</body>
<script type="text/javascript"></script>
<script type="text/javascript">

if(typeof(HTMLElement) != "undefined") // 给非IE 浏览器添加方法 contains
{
    HTMLElement.prototype.contains = function(obj)
    {
      while(obj != null && typeof(obj.tagName) != "undefined")
      {
            if(obj == this)
              return true;
            obj = obj.parentNode;
      }
            return false;
    };
}

var $ = function (id,obj) {
    return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
    return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};

//选项卡类，头，内容，选中的索引，选中样式，默认样式，是否自动切换,切换时间间隔（毫秒）
function Tab(heads,contents,selectedIndex,curStyle,style,isAutoChange,space)
{
    if(heads && contents && heads.length　&& contents.length && heads.length==contents.length)
    {
        this.heads=heads;
        this.contents=contents;
    }else
    {
        alert("参数错误！");
        return;
    }
    this.selectedIndex = selectedIndex||0;
    this.curStyle=curStyle||"";
    this.style = style||"";
    this.isAutoChange=isAutoChange||false;
    this.space = space || 3000;
    this.timer=null;
    this.init();
}

Tab.prototype.init=function()
{
    var obj = this;
    for(var i=0;i<obj.heads.length;i++)
    {
        obj.heads[i].index=i;
        obj.heads[i].οnmοuseοver=function(){obj.setTab(this.index);if(obj.isAutoChange){clearInterval(obj.timer);}};
        if(obj.isAutoChange)
        {
             obj.contents[i].οnmοuseοut=obj.heads[i].οnmοuseοut=function(e){
                e = e||event;
                e = e.toElement || e.relatedTarget ; // IE toElement FF:relatedTarget
               if(typeof(e)!="undefined" &&!this.contains(e)){clearInterval(obj.timer);obj.timer=setInterval(function(){obj.setTab(obj.selectedIndex=(++obj.selectedIndex)%obj.heads.length);},obj.space);}
            };

            obj.contents[i].οnmοuseοver=function(e){clearInterval(obj.timer);};
        }
    }
    if(obj.isAutoChange){obj.timer=setInterval(function(){obj.setTab(obj.selectedIndex=(++obj.selectedIndex)%obj.heads.length);},obj.space);}
    obj.setTab( obj.selectedIndex);
}
Tab.prototype.setTab=function(index)
{
     for(var i=0;i<this.heads.length;i++)
    {
        this.heads[i].className = i == index ? this.style+' '+this.curStyle :this.style;
        this.contents[i].style.display = i == index ? "block" : "none";
    }
    this.selectedIndex = index;
}

window.οnlοad=function()
{
    var heads = $("tabHeads");
    var contents=$("tabContents");
    var tab1=new Tab($$('li',heads),getChilds(contents),0,'curTab','tabs');

    var heads1 = $("tabHeads1");
    var contents1=$("tabContents1");
    var tab2=new Tab($$('li',heads1),getChilds(contents1),1,'curTab','tabs',true,1500);

};

function getChilds(o)
{
    if(!o || !o.childNodes)return null;
    var r=[];
    for(var i=0;i<o.childNodes.length;i++){
      if(o.childNodes[i].tagName){r.push(o.childNodes[i]);}
    }
    return r;
}

</script>

</html>

hch126163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 无插件选项卡支持自动改变选中项

选项卡 *{margin:0px;padiving:0px;} body{ padiving:0;font:12px "宋体"; height:100%; width:100%; } ul,li{ list-style-type:none;padding:0px;} .tabHeads{width:962px;height:31px;margin
复制链接

扫一扫