script 高手们请帮我看下一个简单的问题把

看下面我写的 script 我想把代码想要改成跟上面图一样改有难度所以问下
第一个是 on 状态其他3个按钮是没有style 效果我想把没有style 效果的按钮上 onmouseover 和 onmouseout
但第一个已经on状态的按钮也有影响
怎样才能第一个按钮不影响 onmouseover 和 onmouseout 呢？<style>
div {width:50px; height:24px; font:12px Gulim; float:left; background-color:#f1f1f1; border: solid 1px #ccc; text-align:center; cursor:pointer; margin-left:-1px;}
.on {background-color:#fff; border-bottom: none;}
ul {margin:0; padding:0;}
li {width:196px; height:100px; background-color:#99cc00; list-style:none; display:none;}
li.view {display:block;}
span {clear:both; font:0; height:0; margin:0; padding:0; display:block;}
</style><script>
window.onload = function(){
var btn = document.getElementsByTagName('div');
var box = document.getElementsByTagName('li');
var i=0;

for(i=0;i<btn.length;i++){
btn[i].index = i;
btn[i].onclick = function(){
for(i=0; i<btn.length;i++){
btn[i].className='';
box[i].style.display='none';
} //alert('点击了第'+this.index+'个按钮');
box[this.index].style.display = 'block';
this.className='on';
}
}
}
</script><div class="on">百度</div>
<div>淘宝</div>
<div>腾讯</div>
<div>网易</div>
<span class="return"></span>
<ul>
<li class="view">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

很简单的事吗，把btn[i].className='';改成：if (i>0)btn[i].className='';
window.onload = function(){
        var btn = document.getElementsByTagName('div');
        var box = document.getElementsByTagName('li');
        var i=0;
        var isOut = false;
        for(i=0;i<btn.length;i++){
            btn[i].index = i;
            btn[i].onmouseover = function(){
                if(isOut){
                    for(i=0; i<btn.length;i++){
                        if (i>0)btn[i].className='';
                        box[0].style.display = 'none'
                        box[i].style.display='none';                    }
                    box[this.index].style.display = 'block';
                    this.className='on';
                }
            }
            btn[i].onmouseout = function(){
                isOut = true;
                for(var j=1; j<btn.length;j++){
                    box[j].style.display='none';
                    btn[j].className=''
                }
                box[0].style.display = 'block';
                btn[0].className='on';
            }        }
    }
在原有的js上做了相应的调整，应该能达到LZ的要求
补充一下，刚看了看，代码中的“isOut”不需要，可去掉
但您写的不完整
要是我把淘宝点击的话 on 状态是淘宝按钮然后其他的按钮又 onmouseover / onmouseout 状态
<script language="javascript">
        function cs(div) {
            var f = div.parentNode;
            for (var i = 0; i < f.childNodes.length; i++) {
                if (f.childNodes[i].tagName == "DIV" && f.childNodes[i] == div) {
                    f.childNodes[i].className = "true";
                    window.document.getElementById(f.childNodes[i].id + "div").style.display = "block";                } else if (f.childNodes[i].tagName == "DIV") {
                    f.childNodes[i].className = "false";
                    window.document.getElementById(f.childNodes[i].id + "div").style.display = "none";
                }
            }
        }
    </script>
    <title></title>
</head>
<body>
    <div id="main">
        <div style="float: left; padding: 5px;">
            <img src="images/b.jpg" /></div>
        <div id="tops">
            <div id="a" class="true" onclick="cs(this)">
                全部手机</div>
            <div id="b" class="fasle" onclick="cs(this)">
                GSM手机</div>
            <div id="c" class="fasle" onclick="cs(this)">
                双模手机</div>
        </div>

            <div class="head" id="adiv">
               全部手机
            </div>
            <div class="head2" id="bdiv">
                GSM手机
            </div>
            <div class="head2" id="cdiv">
                双模手机
            </div>

    </div>
</body>
直接把鼠标点击事件替换成鼠标over 事件
你要把意思说清楚点：是不是默认显示第一个框，然后鼠标经过第2，3，4个框时显示对应的div内容。当鼠标离开时立刻显示回第一个框内容？
<style>
    div {width:50px; height:24px; font:12px Gulim; float:left; background-color:#f1f1f1; border: solid 1px #ccc; text-align:center; cursor:pointer; margin-left:-1px;}
    .on {background-color:#fff; border-bottom: none;}
    ul {margin:0; padding:0;}
    li {width:196px; height:100px; background-color:#99cc00; list-style:none; display:none;}
    li.view {display:block;}
    span {clear:both; font:0; height:0; margin:0; padding:0; display:block;}
</style>
    <div class="on">百度</div>
    <div>淘宝</div>
    <div>腾讯</div>
    <div>网易</div>
<span class="return"></span>
<ul>
    <li class="view">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script type="text/javascript">
    var n=-1;//当前定时器指定的div
    var div=document.getElementsByTagName("div");
    var ul=document.getElementsByTagName("li");
    function on_div(k){
        for(var i=0;i<div.length;i++){
            if(i!=n){div[i].className=""}
            ul[i].style.display="none";
        }
        div[k].className="on";
        ul[k].style.display="block";
    }
    window.setInterval(function(){
        n++;
        if(n>=div.length)n=0;
        div[n].className="on";
        on_div(n);
    },3000);
    for(var i=0;i<div.length;i++){
        div[i].onmouseover=(function(x){return function(){on_div(x)};})(i);
    }
</script>
window.onload = function(){
    var clickindex = 0;
    var btn = document.getElementsByTagName('div');
    var box = document.getElementsByTagName('li');
    var i=0;    for(i=0;i<btn.length;i++){
        btn[i].index = i;
        btn[i].onclick = function(){
            for(i=0; i<btn.length;i++){
                btn[i].className='';
                box[i].style.display='none';
            }
            //alert('点击了第'+this.index+'个按钮');
            box[this.index].style.display = 'block';
            this.className='on';

            clickindex = this.index;
        }

        btn[i].onmouseover = function(){
            if(clickindex!=this.index){
                this.className='on';
                //如果需要同步切换LI
                //box[this.index].style.display = 'block';
                //box[clickindex].style.display = 'none';
            }
        }

        btn[i].onmouseout = function(){
            if(clickindex!=this.index){
                this.className='';
                //同步隐藏
                //box[this.index].style.display = 'none';
                //box[clickindex].style.display = 'block';
            }
        }
    }
}
<script type="text/javascript">
    //点击显示对应ul的内容，并添加on样式。鼠标经过只添加on样式
    var n=0;
    var div=document.getElementsByTagName("div");
    var ul=document.getElementsByTagName("li");
    for(var i=0;i<div.length;i++){
        div[i].onmouseover=(function(x){return function(){
            div[x].className="on";
        }
        })(i);
        div[i].onmouseout=(function(x){return function(){
            if(x!=n)div[x].className="";
        }
        })(i);
        div[i].onclick=(function(x){return function(){
            for(var i=0;i<ul.length;i++){
                ul[i].style.display="none";
                div[i].className="";
            }
            ul[x].style.display="block";
            div[x].className="on";
            n=x;
        }
        })(i);
    }
</script>
谢谢您老师给您评价了 thanks

script 高手们 请帮我看下一个简单的问题把

解决方案 »

script 高手们请帮我看下一个简单的问题把