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

 
二、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. Codeforces 377A - Maze

    A. Maze 题目链接:http://codeforces.com/contest/377/problem/A time limit per test 2 seconds memory limit ...

  2. Django - Python3 常用命令

    1.创建Django 项目 执行命令 django-admin.py startproject project_name 2.创建app 执行命令 注意:要先进入项目目录下,cd project_na ...

  3. 两排序数组的中位数 Median of Two Sorted Arrays

    2018-11-18 23:33:28 问题描述: 问题求解: 这个问题是一个比较有难度的可以使用二分搜索法求解的问题,如果采用朴素的解法进行merge再找中位数的话,其时间复杂度为O(n1 + n2 ...

  4. python 断言大全

    参考链接:https://blog.csdn.net/qq1124794084/article/details/51668672 1. 小数位模糊等于 自动化脚本最重要的是断言,正确设置断言以后才能帮 ...

  5. 实例对比 hibernate， spring data jpa， mybatis 选型参考

    原文: 最近重构以前写的服务,最大的一个变动是将mybatis切换为spring data jpa,切换的原因很简单,有两点:第一.它是spring的子项目能够和spring boot很好的融合,没有 ...

  6. 59 Cookie 与 Session

    Cookie Cookie是由服务器创建,然后通过响应发送给客户端的一个键值对. 客户端会保存Cookie,并会标注出Cookie的来源(哪个服务器的Cookie). 当客户端向服务器发出请求时会把所 ...

  7. 5月13 PDO数据访问抽象层

    方法1:较简单的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. 四则运算web最终版

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

  9. 根据userAgent判断打开网页的所在终端，以及浏览器

    function _IsIOS() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/iPhone\sOS/i) == " ...

  10. Java中获得当前静态类的类名

    通常在打印日志的时候需要输出类名,普通类可以用this.getClass(),但是静态类没有this,直接写类名耦合度高. 参考了: https://stackoverflow.com/questio ...