选项卡总有问题，改的眼睛都花了，请帮忙看一下。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>选项卡</title>
<script src="jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body {
margin:0 auto;
max-width:640px;
padding:0px;
height:100%;
}
a{text-decoration:none;}
li{list-style:none;}
img{border:0;}
.clear{clear: both;}
.hide {display: none;}
#list{margin-top:2%;}
#list-tit li{float:left;width:25%;}
.list_tit_line {
display:block;
width:100%;
height:48px;
line-height:48px;
color:#333;
border-bottom: 1px solid #000;
text-align:center;
cursor:pointer;
}
.selected{
background-color: #EAEAEA;
border-bottom: 1px solid #d38042;
}
.hide{display:none;}
.nav ul {
margin:0;
padding:0;
height:58px;
width: 100%;
}
.list_tit_line a,.nav ul li a{
text-align:center;
font-size:18px;
}
.tab_con{margin-top:2%;line-height:28px;font-size:18px;}
.tab_con .more{font-size:18px;color:#d38042;margin-top:-28px;float:right;display:block;}
.tab_img{float: right;width: 38%;margin-top: 6%;}
.tab_conlist{width: 60%;float: left;margin-top: 4%}
.tab_conlist li{font-size:18px;line-height:30px;}
.tab_conlist li a{color:#333;}
</style>
</head>
<body>
<div id="list">
<ul id="list-tit" class="list-tit">
<li><a class="list_tit_line selected" href="">太阳系</a></li>
<li><a class="list_tit_line" href="">宇宙</a></li>
<li><a class="list_tit_line" href="">空间站</a></li>
<li><a class="list_tit_line" href="">地球</a></li>
<div class="clear"></div>
</ul>
<div class="list-con" id="list-con">
<div class="tab_con">
<p> 清晨，当你站在茫茫大海的岸边或者五岳之首的泰山，眺望东方冉冉升起的一轮红日时，一种蓬勃向上的激情会从心底油然而生。人们热爱太阳，赞美太阳，会把太阳当作是光明。
</p>
<a class="more" href="#">【更多】</a>
<ul class="tab_conlist">
<li><span>·</span><a href="#">古人对宇宙的认识</a></li>
<li><span>·</span><a href="#">揭秘宇宙线</a></li>
<li><span>·</span><a href="#">星系与宇宙</a></li>
<li><span>·</span><a href="#">膨胀的宇宙：哈勃定律</a></li>
</ul>
</div>
<div class="tab_con hide">222111111</div>
<div class="tab_con hide">333111111111</div>
<div class="tab_con hide">4441111111</div>
</div>
</div>
<script>
$(document).ready(function(){
var tab_li = $('#list ul.list-tit li a');
tab_li.click(function(){
$(this).css("background","#f00");
$(this).addClass('selected').siblings().removeClass('selected');
var index = tab_li.index(this);
$('div.list-con > div').eq(index).show().siblings().hide();
});
});
</script>
</body>
</html>
行走的指尖3回答
-
学习js
选择器这一部分，建议你再重新看看 -
学习js
写的简直惨不忍睹，逻辑乱，没有代码规范。。
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery