【jQuery02】点击标题面板显示内容
<!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>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;} .box{margin:10px;padding:10px;}
.box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
.box p{line-height:20px;} #panels{margin:10px;padding:10px;width:380px;}
#panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;}
#panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;} </style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#panels dd:not(dd:first)").hide()
$("#panels dt").click(function(){ $("#panels dt").next().hide()
$(this).next().toggle()
})
})
</script> </head>
<body>
<div class="box">
<h3>试题要求:</h3>
<p>
.点击每组的标题时,显示该标题下的面板;同时隐藏其他的面板。<br />
.页面加载完毕后默认显示第一个标题下的面板。<br />
</p>
</div> <dl id="panels">
<dt>DotNet23</dt>
<dd>英雄们,该写作业了......</dd>
<dt>DotNet24</dt>
<dd>其实它只是个传说........</dd>
<dt>DotNet25</dt>
<dd>未完,待续......</dd>
<dt>DotNet26</dt>
<dd>此处省略一万字......</dd>
</dl> </body>
</html>

【jQuery02】点击标题面板显示内容的更多相关文章
- JS实现点击参数面板按钮显示或隐藏数据
当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
- jquery如何实现点击标题收缩下面的内容
jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...
- 帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据
当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
- [python][django学习篇][12]继续设计博客首页,点击博客标题能显示文章的详情
回顾一下开发流程:配置url, 编写视图函数,编写对应模板 配置URL 首页视图匹配的 URL 去掉域名后,是一个空的字符串.每篇文章的详情有着不同的 URL,因此可以设计文章详情页面URl:< ...
- 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失
开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...
- python 全栈开发,Day126(创业故事,软件部需求,内容采集,显示内容图文列表,MongoDB数据导入导出JSON)
作业讲解 下载代码: HBuilder APP和flask后端登录 链接:https://pan.baidu.com/s/1eBwd1sVXTNLdHwKRM2-ytg 密码:4pcw 如何打开APP ...
- 软件部需求,内容采集,显示内容图文列表,MongoDB数据导入导出JSON
全局变量 由于多个html页面,需要引用同一个变量.这个时候,需要定义一个全局变量!如何定义呢? 默认包含了mui的html文件都导入mui.js文件.那么将变量写在mui.js中,就可以实现所有页面 ...
- javascript学习内容--改变样式、取消设置、显示内容、隐藏内容
<head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...
- dede顶级栏目直接显示内容
点击网站栏目管理,增加顶级栏目 在弹出的增加窗口中,填上栏目名称,其它的如果没有特殊的要求可直接默认 点击常规选项旁边的高级选项,并且在列表模板中,将其改一个文件名,这个文件名就是后面需要使用到的文件 ...
随机推荐
- Linux 环境中从源代码编译安装 ReText 问题与解决
从源代码编译安装 ReText 问题与解决 1. 如何安装 Python Markups 1.1 从 https://launchpad.net/python-markups 下载 Python Ma ...
- sdoi2013 spring(hash+容斥)
大体思路是先求出来\(f[i]\)代表有至少\(i\)个位置相同的点对数. 然后就已经没什么好害怕的了(跟BZOJ3622一样) 然后这个\(f[i\)]怎么求呢? 最无脑的方法就是枚举位置,然后\( ...
- 线段树合并(【POI2011】ROT-Tree Rotations)
线段树合并([POI2011]ROT-Tree Rotations) 题意 现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有nn个叶子节点,满足这些权值为1-n1-n的一个 ...
- [USACO18OPEN] Multiplayer Moo (并查集+维护并查集技巧)
题目大意:给你一个N*N的棋盘,棋盘上每个点都有一个权值 第一问求一个权值形成的最大联通块中点的数量 第一问求两个权值共同形成的最大联通块中点的数量 提供一种并查集的做法:(感谢大佬们的题解)第一问把 ...
- Linux赛车游戏 SuperTuxKart 1.0 正式发布
SuperTuxKart是一款受Mario Kart(马里奥赛车)启发并以Linux/Tux为主题的开源赛车游戏,经过12年多的开发,已经达到1.0版本.并且确定这个版本确实是一个重要的里程碑. Su ...
- 一种神奇的双向循环链表C语言实现
最近在看ucore操作系统的实验指导.里面提要一个双向循环链表的数据结构,挺有意思的. 其实这个数据结构本身并不复杂.在普通链表的基础上加一个前向指针,我们就得到了双向链表,再把头尾节点连起来就是双向 ...
- Mybatis之MySql批量insert后返回主键
需求:使用批量插入后,需要insert之后的每一条记录的ID 注意:Mybatis3.3.1的版本以后支持批量插入后返回主键ID 示例: domin.java: public class User { ...
- 【codeforces 452D】Washer, Dryer, Folder
[题目链接]:http://codeforces.com/problemset/problem/452/D [题意] 洗衣服有3个步骤,洗,干,叠; 有对应的3种洗衣机,分别有n1,n2,n3台,然后 ...
- tomcat使用及原理
1,Tomcat作为Servlet容器的基本功能 2,Tomcat的组成结构 Tomcat本身由一列的可配置的组件构成,其中核心组件是Servlet容器组件,它是所有其他Tomcat组件的顶层容器.T ...
- android 读取xml
在有些应用中,有一点小数据.直接存储在XML就是.实现较为简单, 1.xml文件放入asset目录.结构如: <?xml version="1.0" encoding=&qu ...