原生JS与jQuery编写简单选项卡

作者：看五分钟佩奇的小姑姑时间：2024-04-30 09:52:52　

本文实例为大家分享了JS编写简单选项卡的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选项卡</title>
<style type="text/css">
#div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}
.active{background:#999;}
</style>


<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var aInput=document.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='';
}

this.className='active';
aCon[this.index].style.display='block';
}
}
}
</script>


<script type="text/javascript" src='../jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(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">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">11111</div>
<div>22222</div>
<div>33333</div>
</div>
</body>
</html>

来源：http://blog.csdn.net/Aloe_904/article/details/78362693

标签：js,jquery,选项卡

投稿

原生JS与jQuery编写简单选项卡

猜你喜欢

介绍27款经典的CSS框架

pandas.DataFrame.to_json按行转json的方法

python处理RSTP视频流过程解析

python使用cv2库、下载opencv库的方法

会员下线加积分，实现原理分享（有时间限制）

Python字符串转换成浮点数函数分享

javascript将中国数字格式转换成欧式数字格式的简单实例

pyqt5自定义信号实例解析

python break和continue用法对比

Tensorflow训练模型越来越慢的2种解决方案

基于python实现MUI区域滚动

MySQL修改默认引擎和字符集详情

python调用新浪微博API项目实践

使用PyCharm创建Django项目及基本配置详解

详解Python变量与注释高级用法

python框架flask知识总结

Django数据库连接丢失问题的解决方法

django数据模型on_delete, db_constraint的使用详解

asp中提取HTML中图片的SRC路径

Python实现的求解最小公倍数算法示例