首页 新闻 会员 周边

点击按钮，选项卡LI会逐步的递增，点击递增的li下面内容还会继续切换，我现在就做到点击按钮li逐步递增，可

0
悬赏园豆：30 [已解决问题] 解决于 2014-06-30 13:15


<!--点击按钮，选项卡LI会逐步的递增，点击递增的li下面内容还会继续切换，我现在就做到点击按钮li逐步递增，可是点击li，他不会切换内容，希望大神给我解决一下这个问题？？

-->

<!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:0; padding:0}
ul{ list-style:none}
#tab{ width:510px; margin:30px auto; border:3px solid #000}
#title{ height:40px;}
#title li{ float:left; height:40px; width:100px; line-height:40px; text-align:center; background:#090; color:#000;
font-size:16px; font-weight:bold; margin-right:2px;margin-bottom:2px; cursor:pointer}
#title li.curLi{ background:#063; color:#fff}

#mains{ width:510px; height:300px; clear:both; overflow:hidden}
#mains ul{ width:510px; height:300px; background:#9C9; display:none}
#mains ul li{ line-height:28px; padding:2px 10px; cursor:pointer}
#mains ul.curUl{ display:block}
.red{ color:red}
.purple{ color:purple}
.gray{ color:gray}
.hover{ color:#FF0}
#oBtn{ display:block; width:200px; height:40px; margin:30px auto; cursor:pointer}

</style>
</head>

<body>
<input type="button" id="oBtn" value="点击按钮逐步增加选项" />
<div id="tab">
<ul id="title">
<li class="curLi">Tab1</li><li>Tab2</li><li>Tab3</li>
</ul>
<div id="mains">
<ul class="curUl">
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
</ul>
<ul>
<li>2222222222222222222222222222</li>
<li>222222222222222222222222222</li>
<li>2222222222222222222222222222</li>
<li>222222222222222222222222222</li>
<li>2222222222222222222222222222</li>
<li>222222222222222222222222222</li>
<li>2222222222222222222222222222</li>
<li>222222222222222222222222222</li>
</ul>
<ul>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
<li>33333333333333333</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var oBtn=document.getElementById("oBtn");
oBtn.onclick=function(){
var zLis=document.createElement("li");
var title=document.getElementById("title");
title.appendChild(zLis);
}

var oLis=document.getElementById("title").getElementsByTagName("li");
var oDivs=document.getElementById("mains").getElementsByTagName("ul");
function changeTab(nIndex){
for(var i=0;i<oLis.length;i++){
oLis.item(i).className=null;
oDivs.item(i).className=null;
};
oLis.item(nIndex).className="curLi";
oDivs.item(nIndex).className="curUl";
};
for(var i=0;i<oLis.length;i++){
var oLi=oLis.item(i);
oLi.index=i;
oLi.onclick=function(){
changeTab(this.index);
};
for(var j=0;j<oDivs.length;j++){
var oLis2 = oDivs[j].getElementsByTagName("li");
for(var m=0;m<oLis2.length;m++){
switch(m%3){
case 0:
oLis2[m].className = 'red';
break;
case 1:
oLis2[m].className = 'purple';
break;
default:
oLis2[m].className = 'gray';
};
//鼠标滑过离开改变颜色
oLis2.item(m).onmouseover=function(){
var tmp = this.className;
this.className='hover';
this.onmouseout=function(){
this.className=tmp;
};
};
};
};
}

</script>

xiaoleilei的主页 xiaoleilei | 初学一级 | 园豆：80
提问于：2014-06-25 09:12
< >
分享
最佳答案
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>TEst</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        #tab { width: 510px; margin: 30px auto; border: 3px solid #000; }
        #title { height: 40px; }
            #title li { float: left; height: 40px; width: 100px; line-height: 40px; text-align: center; background: #090; color: #000; font-size: 16px; font-weight: bold; margin-right: 2px; margin-bottom: 2px; cursor: pointer; }
                #title li.curLi { background: #063; color: #fff; }
        #mains { width: 510px; height: 300px; clear: both; overflow: hidden; }
            #mains ul { width: 510px; height: 300px; background: #9C9; display: none; }
                #mains ul li { line-height: 28px; padding: 2px 10px; cursor: pointer; }
                #mains ul.curUl { display: block; }
        .red { color: red; }
        .purple { color: purple; }
        .gray { color: gray; }
        .hover { color: #FF0; }
        #oBtn { display: block; width: 200px; height: 40px; margin: 30px auto; cursor: pointer; }
    </style>
</head>
<body>
    <input type="button" id="oBtn" value="Add" />
    <div id="tab">
        <ul id="title">
            <li class="curLi">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
        </ul>
        <div id="mains">
            <ul class="curUl">
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111</li>
            </ul>
            <ul>
                <li>2222222222222222222222222222</li>
                <li>222222222222222222222222222</li>
                <li>2222222222222222222222222222</li>
                <li>222222222222222222222222222</li>
                <li>2222222222222222222222222222</li>
                <li>222222222222222222222222222</li>
                <li>2222222222222222222222222222</li>
                <li>222222222222222222222222222</li>
            </ul>
            <ul>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
                <li>33333333333333333</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
var oBtn=document.getElementById("oBtn");
oBtn.onclick=function(){
    var zLis=document.createElement("li");
    var title=document.getElementById("title");
    title.appendChild(zLis);
    //添加了TabHeader，也需要添加一个TabContent啊!
    var mains=document.getElementById('mains');
    var newUl=document.createElement('ul');
    newUl.innerHTML='<li>我是新选项卡内容</li>';
    mains.appendChild(newUl);
    //还需要注册点击事件
    var idx=title.children.length-1;//索引，需要-1
    zLis.onclick=function(){
        changeTab(idx);
    };
}
var oLis=document.getElementById("title").getElementsByTagName("li");
var oDivs=document.getElementById("mains").getElementsByTagName("ul");
function changeTab(nIndex){
    oLis=document.getElementById("title").getElementsByTagName("li");
    oDivs=document.getElementById("mains").getElementsByTagName("ul");
    for(var i=0;i<oLis.length;i++){
        oLis.item(i).className=null;
        oDivs.item(i).className=null;
    };
    oLis.item(nIndex).className="curLi";
    oDivs.item(nIndex).className="curUl";
};
for(var i=0;i<oLis.length;i++){
    var oLi=oLis.item(i);
    oLi.index=i;
    oLi.onclick=function(){
        changeTab(this.index);
    };
    for(var j=0;j<oDivs.length;j++){
        var oLis2 = oDivs[j].getElementsByTagName("li");
        for(var m=0;m<oLis2.length;m++){
            switch(m%3){
                case 0:
                oLis2[m].className = 'red';
                break;
                case 1:
                oLis2[m].className = 'purple';
                break;
                default:
                oLis2[m].className = 'gray';
            };
            //鼠标滑过离开改变颜色
            oLis2.item(m).onmouseover=function(){
                var tmp = this.className;
                this.className='hover';
                this.onmouseout=function(){
                    this.className=tmp;
                };
            };
        };
    };
}
</script>
收获园豆：30
幻天芒 | 高人七级 |园豆：37175 | 2014-06-25 13:56

 好棒啊！谢谢！嘿嘿可以不可以把新添加的li上面加上Tab5，Tab6.....因为点击出来的都是空白的嘿嘿

xiaoleilei | 园豆：80 (初学一级) | 2014-06-25 17:58

 

亲我想问一下为什么要-1啊！

 

可以让点击出来li加上Tab几吗嘿嘿新更换的内容也变一下嘿嘿，怎么写那个循环呢！

 

 

 

 

 

xiaoleilei | 园豆：80 (初学一级) | 2014-06-25 18:06

@xiaoleilei: -1是因为索引是从0开始算的。如果是第四个，那么索引为3。所以需要-1。

如果需要标题，只需要对zLis.innerText="Tab4..."就可以了。

幻天芒 | 园豆：37175 (高人七级) | 2014-06-25 20:01

@幻天芒: 如果这样写zLis.innerText="Tab4..."，他点击出来都是一样的Tab，怎么让他是Tab4，Tab5,Tab6....还有div的内容也是，怎么是别的呢！不是死的那种？

xiaoleilei | 园豆：80 (初学一级) | 2014-06-25 20:06

@xiaoleilei: 你要什么内容就在这个等号后面写了。如果是Tab4这种，你完全可以'Tab'+idx嘛。

幻天芒 | 园豆：37175 (高人七级) | 2014-06-25 20:07

@幻天芒: 太谢谢你了，让我学会了灵活变通，嘿嘿感谢

xiaoleilei | 园豆：80 (初学一级) | 2014-06-26 10:52

@xiaoleilei: 代码可以多尝试。

幻天芒 | 园豆：37175 (高人七级) | 2014-06-26 13:33
其他回答(1)
0

这种选项卡功能一定要自己去写么？百度一下，直接搜一个 Juqery选项卡 会有不少现成的。

你这个写得又累又不好！ 

http://www.51xuediannao.com/js/jquery/jqtab_jj/

这个地址看下吧，像这种功能最好不要自己去写了，有现在的拿过来，学会改。

而且最好也不要去写纯JS了，要学会用Jquery!

Alex_QY1987 | 园豆：1888 (小虾三级) | 2014-06-25 13:23
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。