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

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: 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 实现标题与内容相呼应样式的更多相关文章

  1. JQuery datatables 标题和内容居中显示

    1.如题,使用到了强大的表格插件datatables,要使标题和内容都居中显示,只需要在jsp引入css,写上如下内容即可: /*qiulinhe:2016年11月7日13:48:26*/ /* da ...

  2. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  3. JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)

    接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...

  4. jQuery中的常用内容总结(一)

    jQuery中的常用内容总结(一)   前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...

  5. jQuery中的常用内容总结(三)

    jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...

  6. jQuery中的常用内容总结(二)

    jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...

  7. WPF自学入门(六)WPF带标题的内容控件简单介绍

    在WPF自学入门(二)WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用,可以让我们大致了解容器可以使用在什 ...

  8. 原生js制作标题与内容保持4行的效果

    在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内 ...

  9. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

随机推荐

  1. Microsoft SQL Server 2005 Service fails to start

    今天碰到一雷死人的事情,在Windows Server 2012 R2上安装SQL SERVER 2005标准版过程中一直遇到"The SQL Server service failed t ...

  2. javascript设计模式-策略模式

    策略模式笔记   将定义的一组算法封装起来,使其相互之间可以替换.   封装的算法具有一定独立性,不会随客户端变化而变化.   与状态模式异同?     1. 结构上看,它与状态模式很像,也是在内部封 ...

  3. SQLite使用(一)&&选择表类型

    在SQLite中,主要有两种表类型,带rowid的表和不带rowid的表.我们利用create table 建一张表,默认都会有一个隐含名字为rowid的主键,暂且称带rowid的表为普通表.如果建表 ...

  4. XmlSerializer的使用

    关键词: XmlSerializer StreamWriter T instance 保存xml文件 代码: public static void SaveXML<T>(string xm ...

  5. 1、策略模式(Strategy)

    //抽象接口 class ReplaceAlgorithm { public: ; }; //三种具体的替换算法 class LRU_ReplaceAlgorithm : public Replace ...

  6. 固态硬盘与机械硬盘 SQL Server 单表插入性能对比测试

    测试环境

  7. 高阶Laplace曲面形变算法(Polyharmonic Deformation)

    数学上曲面的连续光滑形变可以通过最小化能量函数来建模得到,其中能量函数用来调节曲面的拉伸或弯曲程度,那么能量函数最小化同时满足所有边界条件的最优解就是待求曲面. 能量函数通常是二次函数形式: 其中S* ...

  8. android第一行代码-3.activity之间的调用跟数据传递

    前面两节所有应用都是同一个activity中的,是时候讲activity之间交互的操作了,此后会涉及到intent这个概念,这也算一个新的里程碑开始. 主要内容包括intent的使用,以及activi ...

  9. JS处理四舍五入函数 toFixed(n)(可取小数点后n位)

    在JS中四舍五入的函数 toFixed(n) , n为要保留的小数位数. n为0~20,当n超过20的时候,JS会出错. 如果小数点前和要截取的前一位都是0时,不会按常理截取.       var h ...

  10. 学习SAP HANA SQL

      学习SAP HANA SQL 语句(创建 EMP,DEPT,BONUS 和 SALGRADE测试表)--像学Oracle一样学习SAP HANA 标签: sap测试oraclesqltableda ...