首先在header.php的head標簽中加載jQuery庫
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一個JS文件，在header.php的head標簽中加載，JS文件中加入下例代碼：
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $(".entry-foot span:first").addClass("current"); // 為第一個span添加 .current 的樣式，默認選中 $(".entry-foot ul:not(:first)").hide(); //ul 不是第一個時隱藏 $(".entry-foot span").mouseover(function(){ // 鼠標移到 span 上時觸發函數 $(".entry-foot span").removeClass("current"); //為第一個 span 移除 .current 樣式 $(this).addClass("current"); //為觸發的 span 添加樣式 $(".entry-foot ul").hide(); // 隱藏 ul $("."+$(this).attr("id")).fadeIn("slow"); // 這句是核心，class(.) 和觸發 span 的ID 一致的 fadeIn(漸顯) });}); |
HTML代碼如下：
1 2 3 4 5 6 7 8 9 | <div class="tab"> <p> <span ID="tab1">tab1</span> <span ID="tab2">tab2</span> <span ID="tab3">tab3</span></p> <ul class="tab1">以 LI 形式呈現的 tab1 的內容</ul> <ul class="tab2">以 LI 形式呈現的 tab2 的內容</ul> <ul class="tab3">以 LI 形式呈現的 tab3 的內容</ul> </div> |
添加CSS代碼如下：
1 2 3 4 5 6 7 | .entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;} .entry-foot p span{background-color:#EFEFEF;border:1px solid #CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;} .entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;} .entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;} .entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;} .entry-foot .mhot,.entry-foot.allhot{display:none;} |