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>
js 控制导航各个内容区域的更多相关文章
- [js]顶部导航和内容区布局
自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js控制滚动条在内容更新超出时自动滚到底部
//滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- 按钮切换显示不同的内容(js控制)
今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- 正则表达式控制Input输入内容 ,js正则验证方法大全
https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS控制文本框输入的内容
总而言之: 先在‘<input>’ 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g, ...
随机推荐
- 微信小程序页面跳转url如何传对象参数
两步走 首先第一步:wx.navigateTo({ url:"XXX"+"¶ms="+ JSON.stringify(obj); }) 第二步获 ...
- AutoResetEvent控制线程用法
本文主要来自一道面试题,由于之前对AutoResetEvent的用户很模糊(即使已经使用过了).面试题题目很简洁:两个线程交替打印0~100的奇偶数.你可以先动手试试,我主要是尝试在一个方法里面完成这 ...
- 启xin宝app的token算法破解——frida篇（四）
前两篇文章分析该APP的抓包.的逆向: 启xin宝app的token算法破解--抓包分析篇(一) 启xin宝app的token算法破解--逆向篇(二) 启xin宝app的token算法破解--toke ...
- IT人不仅要提升挣钱能力，更要拓展挣钱途径
前几天我上班路上,和小区门口开车的师傅闲聊,发现他们虽然学历不高,但挣钱的途径不少,比如固定接送多位客户,然后能通过朋友圈拓展新客户,而且通过客户口口相传,也能不断拉到生意,算下来每月也能挣1万5出头 ...
- Codeforces 1009G
题意略. 思路: 首先是贪心, 我们从前往后依次从小到大考虑放哪个字符, 重点是判断放了这个字符后, 对于剩下的后缀是否存在合法解. 考虑每个位置的允许放的字符集合只有2 ^ 6种, 我们预处理一个后 ...
- CentOS 7下安装配置搭建jdk+tomcat+MariaDB环境
1．JDK安装 注意:rpm与软件相关命令 相当于window下的软件助手 管理软件 步骤: 1)查看当前Linux系统是否已经安装java 输入 rpm -qa | grep java 2)卸载两个 ...
- Javaweb之国际化
Javaweb之国际化 一.前言 软件的本地化:一个软件在某个国家或地区使用时,采用该国家或地区的语言,数字,货币,日期等习惯. 软件的国际化:软件开发时,让它能支持多个国家和地区的本地化应用.使得应 ...
- Java集合框架之TreeSet浅析
Java集合框架之TreeSet浅析 一.TreeSet综述: 1.1TreeSet简介: TreeSet是Java集合框架的重要成员,先来看看TreeSet在jdk1.8中的定义吧: public ...
- Leetcode之深度优先搜索（DFS）专题-547. 朋友圈（Friend Circles）
Leetcode之深度优先搜索(DFS)专题-547. 朋友圈(Friend Circles) 深度优先搜索的解题详细介绍,点击 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递 ...
- 如何使用有道云笔记的Markdown----初级版?
我一般整理笔记用的是用有道云笔记,在这里,Markdown怎么用? 什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程序员群体所用,目前它已是全球最大的技术分享网站 GitH ...