首先在header.php的head標(biāo)簽中加載jQuery庫(kù)
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一個(gè)JS文件，在header.php的head標(biāo)簽中加載，JS文件中加入下例代碼：
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $(".entry-foot span:first").addClass("current"); // 為第一個(gè)span添加 .current 的樣式，默認(rèn)選中 $(".entry-foot ul:not(:first)").hide(); //ul 不是第一個(gè)時(shí)隱藏 $(".entry-foot span").mouseover(function(){ // 鼠標(biāo)移到 span 上時(shí)觸發(fā)函數(shù) $(".entry-foot span").removeClass("current"); //為第一個(gè) span 移除 .current 樣式 $(this).addClass("current"); //為觸發(fā)的 span 添加樣式 $(".entry-foot ul").hide(); // 隱藏 ul $("."+$(this).attr("id")).fadeIn("slow"); // 這句是核心，class(.) 和觸發(fā) 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 形式呈現(xiàn)的 tab1 的內(nèi)容</ul> <ul class="tab2">以 LI 形式呈現(xiàn)的 tab2 的內(nèi)容</ul> <ul class="tab3">以 LI 形式呈現(xiàn)的 tab3 的內(nèi)容</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;} |