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

最新推荐文章于 2024-07-08 18:01:35 发布

dibengcheng6179

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量107

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/super-zhen/p/3756899.html

版权

原生

<!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>

Jquery

<!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>

Jquery另一种

<!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>

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

转载于:https://www.cnblogs.com/super-zhen/p/3756899.html

dibengcheng6179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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&...
复制链接

扫一扫