<!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>
添加回答
举报
0/150
提交
取消