标签:
效果图如下:鼠标移到标题上,标题下面显示标题对应的内容。实现的方法如下:
1、引入css和js文件
<link href="public/CSS/StyleSheet.css" rel="stylesheet" /> <script src="public/jquery/js/jquery.js"></script>
其中,StyleSheet.css的内容如下:
.picture-title{height: 32px;line-height: 26px;margin-top:5px;font-size: 15px;color:black;} .picture-title ul li {height: 28px; padding: 0 8px; line-height: 28px;padding-bottom: 4px;float: left; display: inline-block; cursor: pointer; text-align: center; font-size: 15px;} .picture-title-active {background: url(image/picture_title_bg.png) left center no-repeat;font-weight: bold;} .picture-content {padding:0px 10px;} .picture-content ul li{font-size:14px;FONT-FAMILY:Microsoft YaHei;line-height:28px;padding-left:12px;background:url(image/point.jpg) left center no-repeat;margin-top: 5px;border-bottom: 1px dashed #b6b6b6;}
2、html代码:
<div> <div class="picture-title"> <ul> <li flag="pic_title" for="pic_cnt_1" class="picture-title-active">测试1</li> <li flag="pic_title" for="pic_cnt_2" id="HeadSection1" runat="server">测试2</li> <li flag="pic_title" for="pic_cnt_3" id="HeadSection2" runat="server">测试3</li> <li flag="pic_title" for="pic_cnt_4" id="HeadSection3" runat="server">测试4</li> </ul> </div> <div class="picture-content"> <ul id="pic_cnt_1"> <li>测试1</li> <li>测试1</li> <li>测试1</li> </ul> <ul id="pic_cnt_2" style="display: none;"> <li>测试2</li> <li>测试2</li> <li>测试2</li> </ul> <ul id="pic_cnt_3" style="display: none;"> <li>测试3</li> <li>测试3</li> <li>测试3</li> </ul> <ul id="pic_cnt_4" style="display: none;"> <li>测试4</li> <li>测试4</li> <li>测试4</li> </ul> </div> </div>
3、js代码:
<script type="text/ecmascript"> $(document).ready(function () { $("li[flag=‘pic_title‘]").mousemove(function () { $("li[flag=‘pic_title‘]").each(function () { $(this).attr("class", ""); $("#" + $(this).attr("for")).hide(); }); $(this).attr("class", "picture-title-active"); $("#" + $(this).attr("for")).show(); }); }); </script>
标签:
原文地址:http://www.cnblogs.com/linhuide/p/5835948.html