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

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. 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决办法方案

    最近操作系统不断地报异常或错误,可能是用得太久了,而刚好工作比较多又不想重新安装系统,但用一段时间后(一天大概有两次)系统就出现各种问题导致无法继续使用真是痛苦万分啊,今天又来了这样的错误: 此实现不 ...

  2. nodejs 中自定义事件

    经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...

  3. SQL Server 2008 R2——查找最小nIndex,nIndex存在而nIndex+1不存在 求最小连续数组中的最大值

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  4. java HashMap

    HashMap 的性能因子 1. 容量:表示桶位的数量. 2. 初始容量: 表在创建是所拥有的桶位数.   如果你知道将要在HashMap存储多少项,创建一个初始容量合适的HashMap将可以避免自动 ...

  5. linux mysql-5.6.26 安装

    下载地址 ftp://mirror.switch.ch/mirror/mysql/Downloads/MySQL-5.6/mysql-5.6.26-linux-glibc2.5-x86_64.tar. ...

  6. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  7. 洛谷P1220关路灯[区间DP]

    题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...

  8. POJ3250[USACO2006Nov]Bad Hair Day[单调栈]

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17774   Accepted: 6000 Des ...

  9. Ajax与JqueryUI和EasyUI错题总结

    Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...

  10. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...