一、项目你需求
点击左边导航栏的某个按钮，右边内容栏显示出，相应的内容
效果如图

 
二、html与css、jQuery
1、div模式
<!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>
<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;
text-align:center;
}
.footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;   
}
 </style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<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>
 
<div class="nav">
<button>London</button>
<button>Paris</button>
<button>Tokyo</button>
</div>
<div class="section">
<ul class="uu">
<li class="d1">London1</li>
<li class="d2">Paris2</li>
<li class="d3">Tokyo3</li>
</ul>
</div>
<div class="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>
 
2、html5样式
<!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>
<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;   
}
button {
 width:100px;
 }
</style>
<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>
 
<nav>
<button>London</button>
<button>Paris</button>
<button>Tokyo</button>
</nav>
<section>
<ul class="uu">
<li class="d1">London1</li>
<li class="d2">Paris2</li>
<li class="d3">Tokyo3</li>
</ul>
</section>
<footer>
Copyright ? W3Schools.com
</footer>
</body>
</html>

JQuery button控制div或者section的更多相关文章

  1. jquery slideDown 控制div出现的方向

    .custom-popup { position: absolute; /*top: 0;*/ 上向下 ; 下向上 ; ; display: none; width: 100%; height: 10 ...

  2. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  3. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  4. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  5. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  6. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  7. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  8. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  9. 控制DIV属性——实现盒子长、宽、背景等变化

    写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...

随机推荐

  1. Qt解析Json数据

    1 JSON数据简介   JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范) ...

  2. LRU缓存机制

    运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (key) 存 ...

  3. 第 8 章 容器网络 - 056 - macvlan 网络结构分析

    macvlan 网络结构分析 macvlan 不依赖 Linux bridge,brctl show 可以确认没有创建新的 bridge. 查看一下容器 bbox1 的网络设备: 除了 lo,容器只有 ...

  4. Python 编程快速上手 第八章总结

    在下面函数中的()中,可为相对路径,也可为绝对路径. 获知当前目录,改变当前目录,查看当前目录 更改当前目录:os.getcwd() 改变当前目录:os.chdir() 查看当前目录:os.listd ...

  5. 提取出一个组装基因组的gap（N）和重复序列区域，保存为bed格式

    参见: Question: How to extract allnon-seqencedpositions from a genome (Fasta file)? test.fa >chr1 N ...

  6. 关于sparksql操作hive，读取本地csv文件并以parquet的形式装入hive中

    说明:spark版本:2.2.0 hive版本:1.2.1 需求: 有本地csv格式的一个文件,格式为${当天日期}visit.txt,例如20180707visit.txt,现在需要将其通过spar ...

  7. Exception:public class feign.codec.EncodeException feign.codec.EncodeException: 'Content-Type' cannot contain wildcard type '*'

    一.异常出现的场景  Spring Cloud 服务A通过feign调用服务B;之前是好好的,但今天突然就不好了,抛以下异常===> 出现原因补充,Spring Boot默认的JSON方式 Ja ...

  8. SWUST OJ(954)

    单链表的链接 #include <stdio.h> #include <stdlib.h> typedef struct LinkNode //单链表节点结构的定义 { cha ...

  9. 四则运算web最终版

    经过若干时间的奋战,终于完成了web版四则运算程序.团队成员:井小普.张贺. 设计思想: 在之前的程序基础上两人结合开发web系统. 首先,进行登录注册界面的编写,不同用户,对应不同的错题库,答题记录 ...

  10. hdu-6397-容斥

    Character Encoding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Oth ...