大神们能告诉下 下面的选项卡js怎么写么

Question

<div class="hot hotzy">
<div class="area bgfff hot-box">
<div class="title clear">
<h2 class="left">标题</h2>
<div class="nav left">
<ul >
<li class="active">选卡1</li>
<li class="">选卡2</li>
<li class="">选卡3</li>
</ul>
</div>
<a href="/" class="right" rel="nofollow">更多 >></a></div>
<div class="hot-con-box">
<div class="img"><a href="/" rel="nofollow"><img src="/" alt=""></a></div>
<div class="hot-con-detail">
<ul style="">
<li >内容1</li>
</ul>
<ul style="display: none;">
<li >内容2</li>
</ul>
<ul style="display: none;">
<li > 内容3</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

<meta charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

<style type="text/css">

li {
list-style: none;
}

.nav li {
float: left;
padding: 5px 15px;
cursor: pointer;
margin-right: 5px;
}

.nav li:hover {
background: #ddd;
}

.hot-con-detail ul {
padding: 5px 15px;
display: none;
}

.active {
color: blue;
font-weight: bold;
background: #ddd;
}


</style>

<script type="text/javascript">

$(document).ready(function() {

$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
$('.hot-con-detail ul').css('display', 'none');
$('.hot-con-detail ul:nth-child('+ $(this).attr('data-id') +')').css('display', 'block');
});

$('.nav ul li:nth-child(1)').click();
})


</script>

<div class="hot hotzy">
<div class="area bgfff hot-box">
<div class="title clear">
<h2 class="left">标题</h2>
<div class="nav left">
<ul >
<li data-id='1'>选卡1</li>
<li data-id='2'>选卡2</li>
<li data-id='3'>选卡3</li>
<li data-id='4'>
<a href="javascript:void(0);">更多...</a>
</li>
</ul>
</div>
<p style='clear: both;'></p>
<div class="hot-con-box">
<div class="img">
<a href="/" rel="nofollow">
<img src="/" alt="">
</a>
</div>
<div class="hot-con-detail">
<ul>
<li >内容1</li>
</ul>
<ul>
<li >内容2</li>
</ul>
<ul>
<li> 内容3</li>
</ul>
<ul>
<li> 更多内容...</li>
</ul>
</div>
</div>
</div>
</div>

本回答被网友采纳