JQuery button控制div或者section
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<h1>City Gallery</h1>
<style>
h1 {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
.nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
.section {
width:200px;
height:200px;
float:left;
background:pink;
display:none;
}
.footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
<script type="text/javascript">
$(function(){
$('.nav button').click(function(){
$('.section').show(); //显示之前在样式中隐藏的div
$('.section li').hide(); //隐藏div中的li
a=$(this).index(); //获取button的index
$('.section li').eq(a).slideToggle(); //显示button对应的li
})
})
</script>
</head>
<button>London</button>
<button>Paris</button>
<button>Tokyo</button>
</div>
<ul class="uu">
<li class="d1">London1</li>
<li class="d2">Paris2</li>
<li class="d3">Tokyo3</li>
</ul>
</div>
Copyright ? W3Schools.com
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<h1>City Gallery</h1>
<style>
h1 {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
//width:800px;
height:300px;
float:left;
background:pink;
display:none;
padding:5px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
width:100px;
}
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('nav button').click(function(){
$('section').show();
$('section li').hide();
a=$(this).index();
$('section li').eq(a).slideToggle();
})
})
</script>
</head>
<button>London</button>
<button>Paris</button>
<button>Tokyo</button>
</nav>
<ul class="uu">
<li class="d1">London1</li>
<li class="d2">Paris2</li>
<li class="d3">Tokyo3</li>
</ul>
</section>
Copyright ? W3Schools.com
</footer>
</body>
</html>
JQuery button控制div或者section的更多相关文章
- jquery slideDown 控制div出现的方向
.custom-popup { position: absolute; /*top: 0;*/ 上向下 ; 下向上 ; ; display: none; width: 100%; height: 10 ...
- jquery实现点击控制div的显示和隐藏
我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...
- 简简单单，jquery中，使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- 控制DIV占满屏幕
网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...
- jQuery实现的Div窗口震动效果实例
本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...
- 控制DIV属性——实现盒子长、宽、背景等变化
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...
随机推荐
- Setting the Java Class Path
The class path is the path taht Java Runtime Environment(JRE) searches for classes and other resourc ...
- Spring Boot之Swagger2集成
一.Swagger2简单介绍 Swagger2,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档.它既可以减少我们创建文档的工作量,同时 ...
- loj#2020. 「AHOI / HNOI2017」礼物
题意:给定xy数组求 \(\sum_{i=0}^{n-1}(x_i+y_{(i+k)\modn}+c)^2\) 题解:先化简可得 \(n*c^2+2*\sum_{i=0}^{n-1}x_i-y_i+\ ...
- 2018 USP Try-outsF - Optimizing Transportation in Portugal
题意:给你一副无向图,求使s到t删掉一条的最短路最大的长度 题解:先预处理s,t到每个点的最短路,二分答案,对于一条边,如果选中这条边,那么对于s->u+u->v+v->t或者s-& ...
- bzoj4516: [Sdoi2016]生成魔咒 sam
题意:每次插入一个数字,查询本质不同的子串有多少个 题解:sam,数字很大,ch数组用map来存,每次ins之后查询一下新建点表示多少个本质不同的子串(l[np]-l[fa[np]]) /****** ...
- nginx本地缓存
Nginx 作为Web服务器或者负载均衡器,一般不执行业务逻辑,而是将请求转到后端服务器,比如 Tomcat 或者 php-fpm,后端处理完毕之后将经过 nginx 将数据返回给用户.在请求转发的过 ...
- 四则运算Java语言实验设计过程1
题目要求: 像二柱子那样,花二十分钟写一个能自动生成三十道小学四则运算题目的 “软件”.要求:除了整数以外,还要支持真分数的四则运算(需要验证结果的正确性).题目避免重复.可定制出题的数量. 设计思路 ...
- Java虚拟机JVM简单理解
Java虚拟机JVM的作用: Java源文件(.java)通过编译器编译成.class文件,.class文件通过JVM中的解释器解释成特定机器上的机器代码,从而实现Java语言的跨平台. JVM的体系 ...
- servlet-api-2.4.jar not loaded(转）
信息: validateJarFile(D:/xj/workspace/webworktest/webapp/WEB-INF/lib/servlet-api-2.4.jar) - jar not lo ...
- Liunx 更新环境时用到的命令
1.进入项目文件所在位置:cd/home/zhaorg/shelly62/apache-tomcat-7.0.5.2/bin 2.关闭服务:./shuntdown.sh或者 sh.shuntdown. ...