自己导入一个jquery包就可以直接用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">

*{
padding: 0;
margin: 0;
}
.container{
width: 70%;
padding-bottom: 50px;

margin: 0 auto;
height: 900px;
}
.title{
height:80px;
background-color: pink;
/*line-height: 80px;*/

}
.title ul li{
list-style: none;
display: inline-block;
margin-right: 70px;
line-height: 80px;
}
.section{
padding: 20px 0px;
background-color: darkgreen;
}
.footer{
height: 200px;
background-color: saddlebrown;
}

</style>
</head>
<body>
<div class="container">
<div class="title">
<ul>
<li class="p0"><a href="#">首页</a></li>
<li class="p1"><a href="#">图书</a></li>
<li class="p2"><a href="#">电影</a></li>
<li class="p3"><a href="#">电视</a></li>
<li class="p4"><a href="#">综艺</a></li>
</ul>
</div>
<div class="section">
<div class="s0">
<h1>我是首页</h1>
<h1>我是首页</h1>
<h1>我是首页</h1>
<h1>我是首页</h1>

</div>
<div class="s1">
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
<h1>我是图书</h1>
</div>
<div class="s2">我是电影</div>
<div class="s3">我是电视，我是电视啊啊啊啊啊啊啊</div>
<div class="s4">我是综艺的内容啊，我是综艺的内容啊，我是综艺的内容啊，我是综艺的内容啊</div>

</div>
<div class="footer">
<p>我是底部内容啊</p>
</div>
</div>

<script>
$(function(){
$(".section").children().css("display","none");//首先隐藏内容区所有内容;
$(".s0").css("display","block");//显示首页内容

$("li").click(function(){
var num=$(this).index();//找到当前菜单的下表
$(".s"+num).css("display","block");//显示菜单对应的菜单内容
$(".s"+num).siblings().css("display","none");//隐藏不是本菜单的其他菜单内容
})

})
</script>
</body>
</html>

js 控制导航各个内容区域的更多相关文章

  1. [js]顶部导航和内容区布局

    自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. js控制滚动条在内容更新超出时自动滚到底部

    //滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...

  3. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  4. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  5. 按钮切换显示不同的内容(js控制)

    今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...

  6. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  7. 正则表达式控制Input输入内容 ,js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  8. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS控制文本框输入的内容

    总而言之:   先在‘<input>’ 里输入      onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g, ...

随机推荐

  1. 调用百度翻译 API 来翻译网站信息

    之前说过jquery.i18n.js 来做网站的中英翻译,前提就得做一套中文内容,一套英文内容来解决,好处是中英翻译可以准确无误,本篇文章我们来看一下调用百度翻译的 API 来进行网站的翻译,但是翻译 ...

  2. Django安装于基本介绍

    pycharm果然是最强大的python IDE,在创建Diango项目时如果没有则自动下载. 然而即使是这样,我在安装Django的时候还是比较曲折的. Django的安装方式有很多,但是因为网络问 ...

  3. 一文搞懂Python可迭代、迭代器和生成器的概念

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...

  4. 吉特日化MES-生产制造的几种形态

    1. 订货型和备货型 工厂的生产形态是以接受订单时间和开始生产时间来划分的,因为生产要么得到销售指令要么得到备货指令不能无缘无故的生产.销售指令驱动生产直接受市场销售影响,而备货型可能是对市场的一种预 ...

  5. [SCOI2009]粉刷匠(动态规划,序列dp,背包)

    分别对每块木板做区间dp,设\(g[i][j]\)表示前i个格子,刷恰好j次,并且第i格是合法的最多合法的格子数.从前往后枚举断点来转移就好了. 这样处理再出来\(g[i][j]\)每一块木板i刷j次 ...

  6. asp.net core系列 71 Web架构分层指南

    一.概述 本章Web架构分层指南,参考了“Microsoft应用程序体系结构指南”(该书是在2009年出版的,当时出版是为了帮助开发人员和架构师更快速,更低风险地使用Microsoft平台和.NET ...

  7. python之爬虫-必应壁纸

    python之爬虫-必应壁纸 import re import requests """ @author RansySun @create 2019-07-19-20:2 ...

  8. Windows 10“数字权利激活”永久性激活！！！

    直接运行软件即可自动激活,等出现"激活成功"即可关闭软件. 注意事项: 激活软件不会帮你打开Windows update服务,如关闭系统自动更细服务的需要先启动服务. 可以在小娜搜 ...

  9. JVM知识点总结

    JVM总体梳理 一.jvm体系总体概览 JVM体系总体分四大块:类的加载机制.jvm内存结构.GC算法 垃圾回收.GC分析 命令调优 这里画了一个思维导图,将所有的知识点进行了陈列,因为图比较大可以点 ...

  10. Leetcode之回溯法专题-212. 单词搜索 II（Word Search II）

    Leetcode之回溯法专题-212. 单词搜索 II(Word Search II) 给定一个二维网格 board 和一个字典中的单词列表 words,找出所有同时在二维网格和字典中出现的单词. 单 ...