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

 
二、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. Lua和C++交互 学习记录之四：全局table交互

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...

  2. 日常英语---六、Maplestory Illium

    日常英语---六.Maplestory Illium 一.总结 一句话总结: maplestory-['meiplstɔri]  illium-镍铬合金 ['meiplstɔri]  n. 枫之谷(网 ...

  3. iTunes , iCloud 用吐了也没把照片给备份好

    下载了iTools ,轻松就倒出来了. Apple这是怎么了,还能不能正常用了? 以前iCloud出来以前,[同步]这个功能,理解起来虽然费劲,还算是能用的. 这回直接就没法倒出照片了?

  4. Redhat 5.7 安装 glibc debuginfo ,终于成功。

    1) yum --enablerepo rhel-debuginfo install glibc-debuginfo 安装完之后,yum list 可以看出debuginfo 是 build 123, ...

  5. 连接PL/SQL

    1.登录PL/SQL Developer 这里省略Oracle数据库和PL/SQL Developer的安装步骤,注意在安装PL/SQL Developer软件时,不要安装在Program Files ...

  6. 20180226xlVbaGetStockData

    Sub LoopGetStockData() Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA.Timer Cells. ...

  7. jquery选择器和基本操作

    定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: ...

  8. redis 基本指令

    redis-cli开启redis客户端 1. set key value // 设置key-value 2. get key // 获取key 3. delete key [] // 删除key 4. ...

  9. 『cs231n』卷积神经网络工程实践技巧_下

    概述 计算加速 方法一: 由于计算机计算矩阵乘法速度非常快,所以这是一个虽然提高内存消耗但是计算速度显著上升的方法,把feature map中的感受野(包含重叠的部分,所以会加大内存消耗)和卷积核全部 ...

  10. 第二阶段——个人工作总结DAY09

    1.昨天做了什么:昨天学习了有关后台的知识. 2.今天打算做什么:实现后台. 3.遇到的困难:还是不知道该如何来做.