选项卡实现

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_30305735

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量54

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Aaron-dzl/p/5821848.html

版权

css和html：

<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>

<body>
<div id="div1" style="border:1px solid red">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>

1、

找到3个button按钮的元素集合，添加click事件；js的话只能用循环给每一个加事件；

$('#div1').find('input').click(function(){

2、将3个button的class置空，相应的内容div，display=“none”；

　　　　　$('#div1').find('input').attr('class','');
        $('#div1').find('div').css('display','none');

3、获得单击哪个button对象，将其设置为class=“active”；并将相应的div，display=“block”；

        $(this).attr('class','active');
        
        $('#div1').find('div').eq( $(this).index() ).css('display','block');

注意：css样式初始将不显示的div，display="none";就会自动隐藏，并且不占位置；

完整代码：

<!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 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
/*window.onload = function(){
    var oDiv = document.getElementById('div1');
    var aInput = oDiv.getElementsByTagName('input');
    var aCon = oDiv.getElementsByTagName('div');
    
    for(var i=0;i<aInput.length;i++){
        
        aInput[i].index = i;
        
        aInput[i].onclick = function(){
            
            for(var i=0;i<aInput.length;i++){
                aInput[i].className = '';
                aCon[i].style.display = 'none';
            }
            
            this.className = 'active';
            aCon[this.index].style.display = 'block';
            
        };
    }
    
};*/


$(function(){
    
    $('#div1').find('input').click(function(){
        
        $('#div1').find('input').attr('class','');
        $('#div1').find('div').css('display','none');
        
        $(this).attr('class','active');
        
        $('#div1').find('div').eq( $(this).index() ).css('display','block');
        
    });
    
});
</script>
</head>

<body>
<div id="div1" style="border:1px solid red">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>
</html>

选项卡JS，Jquery实现

转载于:https://www.cnblogs.com/Aaron-dzl/p/5821848.html

weixin_30305735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡实现

css和html：<style>#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}.active{ background:red;}</style><body><div id="div1" style="border:...
复制链接

扫一扫