JQuery 实现标题与内容相呼应样式

Posted 很厉害的学渣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery 实现标题与内容相呼应样式相关的知识,希望对你有一定的参考价值。

      效果图如下:鼠标移到标题上,标题下面显示标题对应的内容。实现的方法如下:

      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>

 

以上是关于JQuery 实现标题与内容相呼应样式的主要内容,如果未能解决你的问题,请参考以下文章

小程序自定义组件

Jquery实现树桩导航

如何以 JSON 格式回显 XML 的内容? [复制]

iPhone地理编码

JQuery实现样式设置追加移除与切换的方法

jQuery怎么实现tab页切换效果