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

 
二、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. anaconda 安装包

    很多包在anaconda navigator里搜不到 如果为了在host编译opencv而在bashrc和profile里屏蔽了anaconda的路径,则 使用$HOME/anaconda3/bin/ ...

  2. RedHat/CentOS根目录扩容

    下面以redhat为例,介绍如何扩容系统根目录,CentOS也是一样的. 1. 登录到系统中,查看硬盘情况. /dev/sdb就是增加的硬盘. [root@test ~]# fdisk -l 2. 操 ...

  3. Effective java 系列之避免过度同步和不要使用原生态类型，优先考虑泛型

    避免过度同步(67):在一个被同步的方法或代码块中,不要调用哪些被设计成被覆盖的方法或者是由客户端以函数对象的形式提供的方法(21). 有点拗口,书上提供的创建者与观察者模式,add方法太多,看得眼花 ...

  4. 20165327 2017-2018-2 《Java程序设计》第7周学习总结

    20165327 2017-2018-2 <Java程序设计>第7周学习总结 教材内容总结 第十一章 (一)MySQL数据库服务器 下载安装MySQL服务器 启动MySQL数据库服务器 在 ...

  5. CentOS7 下源代码安装php7

    安装PHP7: php-7.1.2.tar.gz:下载:wget http://cn2.php.net/get/php-7.1.2.tar.gz/from/this/mirror 安装php: # t ...

  6. 一篇文章一张思维导图看懂Android学习最佳路线(转载）

    Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级.中级.高级以及资深工程师.只针对Android应用开发,不针对Rom开发和逆向工程等.方便起见虚拟“小 ...

  7. 『MXNet』第十二弹_再谈新建计算节点

    上一节我们已经谈到了计算节点,但是即使是官方文档介绍里面相关内容也过于简略,我们使用Faster-RCNN代码中的新建节点为例,重新介绍一下新建节点的调用栈. 1.调用新建节点 参数分为三部分,op_ ...

  8. 二元谓词中添加const的问题（未解决）

    #include <iostream> using namespace std; #include"set" #include"algorithm" ...

  9. vue element upload图片 回显问题

      beforeUpload (file) { var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); ...

  10. ORACLE中ESCAPE关键字用法

    ESCAPE用法 1.使用 ESCAPE 关键字定义转义符: 在模式中,当转义符置于通配符之前时,该通配符就解释为普通字符. 2.ESCAPE 'escape_character'  允许在字符串中搜 ...