<!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>
選項卡總有問題，改的眼睛都花了，請幫忙看一下。
行走的指尖
2017-02-22 13:47:17
