收藏
批改状态：合格
老师批语：jQ的宗旨就是写得少干得多, 所以代码量很少的
jquery知识点总结：
选择器：
$('img') 标签选择器
$('.class') class选择器
$('#id') id选择器
$(':disabled') 选择所有禁用的 <input> 和 <button> 元素
$(this) 当前 HTML 元素
.css('background','red') CSS选择器
on('click',function(){……}) 事件监听器
$(ev.terget) 当前点击元素
text() 设置或返回被选元素的文本内容。
HTML() 返回或设置被选元素的内容 (inner HTML)。
val() 返回或设置被选元素的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡 JQuery</title>
<style>
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.tab-container{
width: 300px;
height: 300px;
/*background-color: lemonchiffon;*/
}
.tab-nav{
overflow: hidden;
}
.tab-nav ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.active{
background-color: lightcoral;
}
.tab-content .detail {
display: none;
min-height: 300px;
line-height: 30px;
padding-top: 15px;
padding-left: 15px;
}
.detail.active{
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-nav">
<ul>
<li class="active" data-index="1">选项1</li>
<li data-index="2">选项2</li>
<li data-index="3">选项3</li>
</ul>
</div>
<div class="tab-content">
<div class="detail active" data-index="1">
<ul>
<li>选项1-1</li>
<li>选项1-2</li>
<li>选项1-3</li>
</ul>
</div>
<div class="detail " data-index="2">
<ul>
<li>选项2-1</li>
<li>选项2-2</li>
<li>选项2-3</li>
</ul>
</div>
<div class="detail " data-index="3">
<ul>
<li>选项3-1</li>
<li>选项3-2</li>
<li>选项3-3</li>
</ul>
</div>
</div>
</div>
<script src="jquery/jquery.js"></script>
<script>
var tabNav = $('.tab-nav');
var tabList = tabNav.children().children();
var detail = $('.detail');
tabNav.on('click',function (ev) {
tabList.removeClass('active');
$(ev.target).addClass('active');
detail.removeClass('active');
detail.eq($(ev.target).index()).addClass('active');
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
