jquery toggle faq 春江花月夜版

更新时间：2010年05月13日 18:51:43 作者：

jquery toggle点击实现内容的显示效果，喜欢的朋友可以参考下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>豪情</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style> dt{cursor:pointer;font-weight:bold;line-height:26px;color:#53AEF8;} dd{line-height:23px;} p{line-height:23px;margin:0;padding:0;} </style> <script> $(function(){ $('#faq').find('dd').hide().end().find('dt').click(function(){ $(this).next().slideToggle(); }); }); </script></head> <body> <dl id="faq"> <dt>+ 春江花月夜</dt> <dd>春江花月夜，中国唐代诗人张若虚仅存的一首名诗，描绘春天夜晚江畔的景色，词句优美，被称为是"孤篇盖全唐"的杰作，闻一多称之为："这是诗中的诗，顶峰上的顶峰。"。该诗曾被中国当代著名音乐家彭修文改编为民族管弦乐曲，并因此广为流传。</dd> <dt>+ 春江花月夜（其一）</dt> <dd> <p>春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明。</p> <p>江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。</p> <p>江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？</p> <p>人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。</p> <p>白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？</p> <p>可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。</p> <p>此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。</p> <p>昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。</p> <p>斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。</p> </dd> <dt>+ 典故解释：</dt> <dd>【鸿雁长飞光不度／鱼龙潜跃水成文】 在中国古代，"鱼雁"和"书信"有着密切的渊源，古称信使为"鱼雁"，也叫"鸿鳞"。古诗文中留有许多记载，如"关山梦魂长，鱼雁音尘少"、"鱼书欲寄何由达？水远山长处处同"等，唐代著名诗人王昌龄诗中也有"手携双鲤鱼，目送千里雁"的句子。因为传说古代剖鲤鱼时，看见鱼肚里有书信——汉乐府《饮马长城窟行》中有"客从远方来，遗我双鲤鱼。呼儿烹鲤鱼，中有尺素书"——后来人们便把书信叫做"鱼书"了。而鸿雁是候鸟，往返有期，故人们想象鸿雁能传递音讯，因而书信又被称作"飞鸿"、"鸿书"等。《汉书·苏武传》载："教使者谓单于，言天子射上林中，得雁，足有系帛书。"说的是汉武帝时，苏武奉命出使匈奴，被囚胡地19年，矢志不变。他后来得以归汉，主要是因为匈奴单于相信汉使所说鸿雁传书上林苑，被汉昭帝射获，确知苏武在北海牧羊。匈奴单于无奈，只得放回苏武，"鸿雁传书"一时传为美谈。由于这种渊源，"鱼雁"成为了中国早期邮政的象征，如同欧洲一些国家早期邮政以牛号角、牛角头为标志一般。 本诗中这两句其实就是借取"鱼雁"这两个典故而化用到春天江滨景物中的。"鸿雁长飞光不度"，是说传递书信的鸿雁已经早就远远地飞走了，而月光又不能渡过，因而也就不能替我传递音信。"鱼龙潜跃水成文"，指传递书信的鱼龙（这里偏指鱼）也跃入到幽暗的水底藏了起来，看不见了，只剩下水面的波纹而已，意思还是指找不到传递音信的办法。</dd> </dl> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Jquery ajax基础教程
这篇文章主要介绍了Jquery ajax基础教程的相关资料,需要的朋友可以参考下
2015-11-11
基于jQuery排序及应用实现Tab栏特效
这篇文章主要介绍了基于jQuery排序及应用实现Tab栏特效，jquery是基于JavaScript语言写出来的一个框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，但实质上还是js，所以JQuery也属于网页编程语言。下面更多内容需要的小伙伴可以参考一下
2022-03-03
JQuery中html()方法使用不当带来的陷阱
html方法当不传参数时用来获取元素的html内容
2011-04-04
jQuery判断对象是否存在的方法整理
这篇文章主要介绍了jQuery判断对象是否存在的方法,对比分析了纯javascript与jQuery实现判断对象是否存在的功能区别,是非常实用的技巧,需要的朋友可以参考下
2015-02-02
使用PHP+JQuery+Ajax分页的实现
本篇文章小编将为大家介绍，使用PHP+JQuery+Ajax分页的实现。需要的朋友参考下
2013-04-04
15个款优秀的 jQuery 图片特效插件推荐
这篇文章向大家推荐15个最佳 jQuery 图片效果插件。jQuery是最流行的Javascript框架，使用简单灵活，同时还有许多成熟的插件可供选择
2011-11-11
分享一款基于jQuery的视频播放插件
最近在做一个项目，需要一个在线视频播放的功能，在度娘上找了许多都不是太理想，就动手写了一个，分享给大家
2014-10-10
jQuery dialog 异步调用ashx,webservice数据的代码
点击按钮，在弹出的jQuery.dialog中，显示异步返回的数据。WebService可以写复杂的函数，ashx可以根据传过来的参数调用不同的方法，达到同样的效果。
2010-08-08
jQuery 点击获取验证码按钮及倒计时功能
验证码倒计时功能，在前端开发中经常会遇到，下面小编给大家带来了jQuery 点击获取验证码按钮及倒计时功能，感兴趣的朋友跟随小编一起看看吧
2018-09-09
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleav
这篇文章主要介绍了快速移动鼠标所触发的问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave),非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08