首先在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;} |