js 控制导航各个内容区域
自己导入一个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>
最新文章
- [Storm] Storm与asm的恩恩怨怨
- jQuery:多个AJAX/JSON请求对应单个回调并行加载
- linux中无 conio.h的解决办法
- scjp考试准备 - 3 - 关于Arrays
- duilib List控件,横向滚动时列表项不移动或者显示错位的bug的修复
- <;转>;十分钟学会javascript
- java——数据库——commons-DbUtils
- BZOJ 1475: 方格取数( 网络流 )
- gridcontrol中LayoutView层叠图片效果
- ACM搜索问题盘点
- java异常处理之throw, throws,try和catch
- PHP 实例 AJAX 投票
- arcgis api 3.x for js 入门开发系列十二地图打印GP服务(附源码下载)
- HDU3306 Another kind of Fibonacci 矩阵
- 51Nod 1049 最大子段和
- HTML的基本知识点
- Java数组的初始化
- Java并发编程-ReentrantLock源码分析
- python安装教程(Windows系统,python3.7为例)
- jQuery学习笔记(jquery.validate插件)
热门文章
- 【JVM从小白学成大佬】2.Java虚拟机运行时数据区
- 数据结构与算法—二叉排序树(java)
- 动图+源码,演示Java中常用数据结构执行过程及原理
- Joda Time使用小结
- 从 Python 之父的对话聊起,关于知识产权、知识共享与文章翻译
- NLP系列文章:子词嵌入(fastText)的理解!(附代码)
- springboot搭建通用mapper
- 数组的方法 forEach filter map slice splice
- Nginx总结(五)如何配置nginx和tomcat实现反向代理
- 【Appium】Appium+Python环境搭建