JS实现选项卡切换——原生与JQ

原生

JS实现选项卡切换——原生与JQ
<!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>
#div1 .cur{background:#FFC;}
#div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;}
</style>
</head>
<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById(div1);  //获取外围的div元素
    var aBtn = oDiv.getElementsByTagName(input);  //获取所有的按钮元素
    var aDiv = oDiv.getElementsByTagName(div);  //获取选项卡的div
    
    for (var i=0; i < aBtn.length; i++) {
        aBtn[i].index = i;  //给每个按钮加上索引值
        aBtn[i].onmouseover = function(){     //为每个按钮添加点击事件
        for (var i=0; i < aBtn.length; i++) {
            aBtn[i].className = ‘‘;    //将每个按钮去掉cur类
            aDiv[i].style.display = none;  //将所有选项卡隐藏
            };
        this.className = cur;  //被点击的按钮添加cur类
        aDiv[this.index].style.display = block;  //对应的选项卡显示出来,关键处:this.index
        }
    };
}
</script>
<body>
<div id="div1">
    <input type="button" value="1" class="cur" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display: block">1111</div>
    <div>2222</div>
    <div>3333</div>
</div>
</body>
</html>
JS实现选项卡切换——原生与JQ

Jquery

JS实现选项卡切换——原生与JQ
<!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>
#div1 .cur{background:#FFC;}
#div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var aBtn = $(#div1).find(input)
var aDiv = $(#div1).find(div)
aBtn.mouseover(function(){
    aBtn.removeClass(cur);
    aDiv.hide();
    $(this).addClass(cur);
    aDiv.eq($(this).index()).show();
})
})
</script>
<body>
<div id="div1">
    <input type="button" value="1" class="cur" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display: block">1111</div>
    <div>2222</div>
    <div>3333</div>
</div>
</body>
</html>
JS实现选项卡切换——原生与JQ

 Jquery另一种

JS实现选项卡切换——原生与JQ
<!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>
#div1 .cur{background:#FFC;}
#div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").find(input).mouseover(function(){
        $("#div1").find(input).attr(class,‘‘);
        $("#div1").find(div).css(display,none);
        $(this).attr(class,cur);
        $("#div1").find(div).eq($(this).index()).css(display,block);
        })    
})
</script>
<body>
<div id="div1">
    <input type="button" value="1" class="cur" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display: block">1111</div>
    <div>2222</div>
    <div>3333</div>
</div>
</body>
</html>
JS实现选项卡切换——原生与JQ

上面两种都是在网上看到的,效果是一样的。是不是因为原生和JQ的混用?希望不是滥用...

JS实现选项卡切换——原生与JQ,布布扣,bubuko.com

JS实现选项卡切换——原生与JQ

上一篇:《Linux内核分析》课程第二周学习总结


下一篇:git简单配置