jq的tab选项卡
标签： javascript
效果一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
.box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
:40px;display: flex;background: #ccc;text-align: center;}
.box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
.box li.active{background: red;}
.cont{}
.cont div{width: 500px;height: 360px;display: none;}
.cont .cont1{background: #f0f;display: block;}
.cont .cont2{background: #f00;}
.cont .cont3{background: #00f;}
.cont .cont4{background: #0ff;}
</style>
</head>
<body>
<div class="box">
<ul><li class="active">新闻</li><li>广告</li><li>招聘</li><li>介绍</li></ul>
<div class="cont">
<div class="cont1">第一个选项卡的内容区域，111111</div>
<div class="cont2">第二个选项卡的内容区域，222222222</div>
<div class="cont3">第三个选项卡的内容区域，333333</div>
<div class="cont4">第四个选项卡的内容区域，444444</div>
</div>
</div>
</body>
<script src="../jQuery.js"></script>//可自行在官网下载引入
<script type="text/javascript">
// 点击li，设置当前项，操作对应内容区域
$(".box").find("li").click(function(){
// 先取消所有，再给当前加
// 先给当前加，然后取消其他兄弟
// 此处的this，默认找到的是原生js的DOM对象
//console.log(this);
$(this).addClass("active").siblings().removeClass("active");
// 获取当前点击元素的索引
// console.log($(this).index());
$(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");
})
</script>
</html>
效果二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部文件-->
<style type="text/css">
/*全局设置*/
*{
padding: 0px;
margin: 0px;
font-size: 12px;
}
/*设置所有的无序列表*/
ul{
list-style: none;
}
/*整体设置*/
#box{
margin: 50px auto;
width: 550px;
}
/*设置导航*/
#menu{
/*单词，rgb() ,#ffffff------>#fff*/
background: #eee;
/*处理溢出的部分*/
overflow: hidden;
}
/*设置导航中的li*/
#menu li{
float: left;
width: 85px;
line-height: 30px;
text-align: center;
border: 1px solid #eee;
border-bottom-color: #ccc;
border-top-width: 2px;
cursor: pointer;
}
/*设置导航被选中的样式*/
#menu .active{
border-left-color: #ccc;
border-right-color: #ccc;
border-top-color: blue;
border-bottom-color: #fff;
background: #fff;
}
/*设置每一块的内容*/
#panel .panel{
/*将每一块都隐藏*/
display: none;
margin: 10px 0px;
overflow: hidden;
}
/*单独设置第一块,将其显示*/
#panel .active{
/*block或者inline-block都可以*/
display: block;
}
#panel .panel img{
float: left;
}
#panel .panel .title{
margin-left: 280px;
padding-bottom: 10px;
border-bottom:1px solid #ccc;
}
#panel .panel .list{
margin-left: 280px;
}
#panel .panel .list li{
float: left;
line-height: 25px;
margin-top: 10px;
text-decoration: underline;
}
</style>
<script src="../jQuery.js"></script>//需自行引入
</head>
<body>
<!--整体-->
<div id="box">
<!--active:表示哪个块被选中-->
<!--导航-->
<ul id="menu">
<li class="active">手机通讯</li>
<li>手机通讯</li>
<li>手机通讯</li>
<li>手机通讯</li>
<li>手机通讯</li>
<li>手机通讯</li>
</ul>
<!--详细内容-->
<div id="panel">
<div class="panel active">
<!-- <img src="img/images/1.jpg" /> -->
<div class="title">京东家电1</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
<div class="panel">
<!-- <img src="img/images/2.jpg" /> -->
<div class="title">京东家电2</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
<div class="panel">
<!-- <img src="img/images/3.jpg" /> -->
<div class="title">京东家电3</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
<div class="panel">
<!-- <img src="img/images/4.jpg" /> -->
<div class="title">京东家电4</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
<div class="panel">
<!-- <img src="img/images/5.jpg" /> -->
<div class="title">京东家电5</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
<div class="panel">
<!-- <img src="img/images/6.jpg" /> -->
<div class="title">京东家电6</div>
<ul class="list">
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
<li>买电视立即省1800元</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//页面加载响应函数
$(function(){
//给导航中的li添加单击事件
$("#menu li").bind("click",function(){
//一、导航的切换
//1.清空所有li的class
//$("#menu li").removeClass("active");
//2.给选中的li添加新的class
//eq():获取第几个子标签
//index()：获取当前被操作的标签的下标
//$("#menu li").eq($(this).index()).addClass("active");
//将上面的两部合并为一步：
$("#menu li").removeClass("active").eq($(this).index()).addClass("active");
//二、内容的切换
$("#panel .panel").removeClass("active").eq($(this).index()).addClass("active");
})
})
</script>
</body>
</html>
效果三：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
width: 400px;
margin: 50px auto;
border: 1px solid red;
position: relative;
}
.head {
height: 50px;
width: 400px;
}
ul {
list-style: none;
}
ul li {
float: left;
text-align: center;
width: 100px;
height: 50px;
line-height: 50px;
}
.down {
position: relative;
height: 350px;
width: 400px;
}
.down div {
height: 100%;
width: 100%;
position: absolute;
display: none;
}
.head ul li.select {
border-bottom: 2px solid orange;
}
.down div.select {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<ul>
<li class="select">腾讯</li>
<li>百度</li>
<li>淘宝</li>
<li>微信</li>
</ul>
</div>
<div class="down">
<div class="select">腾讯腾讯腾讯腾讯</div>
<div>百度百度百度百度</div>
<div>淘宝淘宝淘宝淘宝</div>
<div>微信微信微信微信</div>
</div>
</div>
<script src="../jQuery.js"></script>//需自行引入
<script>
var lis=$('.head li');
var divs=$(".down div");
var timer=null;
lis.mouseenter(function(){
var index=$(this).index();
var that=this;
//设置延迟显示
timer=setTimeout(function(){
//保持只有一个帝国时期
//去除class
lis.removeClass('select');
divs.removeClass('select');
$(that).addClass("select");
divs.eq(index).addClass('select');
},1000)
}).mouseleave(function(){
clearTimeout(timer);
})
</script>
</body>
</html>
智能推荐
Hibernate学习总结（一）
一、Hibernate简介 一个持久层的ORM框架。ORM：Object Relational Mapping（对象关系映射）。指的是将一个Java中的对象与关系型数据库中的表建立一种映射关系，从而操作对象就可以操作数据库中的表。 二、Hibernate入门 1、创建一个项目，引入jar包 hibernate用到的jar包 2、创建表 3、创建实体类 4、创建映射（*****） 映射需要通过XML...
Linux系统NFS
文章目录 1. nfs简介 1.1 nfs特点 1.2 使用nfs的好处 1.3 nfs的体系组成 1.4 nfs的应用场景 2. nfs工作机制 2.1 RPC 2.2 NIS 2.3 nfs工作机制 3. exports文件的格式 4. nfs管理 5. 作业 5.1手动搭建一个nfs服务器 5.1.1开放/nfs/shared目录，供所有用户查阅资料 5.1.2 开放/nfs/upload目...
关于java中String，StringBuffer，StringBuilder的区别以及StringBuffer，StringBuilder的安全性问题
这里的结果就是正确的然后我们来看他的append方法 它在前边加了一个synchronized来修饰，相当于同时只能有一个线程来访问他，这样就不会产生上边的问题但同时他的效率也就比StringBuilder低，...
Django连接现有mysql数据库
1、打开cmd后cd到项目位置 2、建立项目 django-admin startproject test2 3、编辑项目中的配置文件, mysite/settings.py ,告诉Django你的数据库连接参数和数据库名。具体的说，要提供 DATABASE_NAME , DATABASE_ENGINE , DATAB...
ShareSDK新浪微博登录时报错error：redirect_uri_mismatch
今天用 ShareSDK 做第三方登录的时候碰到个问题，明明在微博平台的应用审核已经通过了，但是调用登录接口的时候一直报错，错误如下： 出现这个错误是因为在微博开放平台上没有设置回调地址，或者设置的回调地址与本地XML中的地址不一致。 在sharesdk.xml文件当中对于微博的设置： 其中RedirectUrl为设置的回调地址，这里的地址必须要与微博开发平台设置的地址相同，否则就会出现上面的错误...
猜你喜欢
python解析网络封包方法
2019独角兽企业重金招聘Python工程师标准>>> 在使用Python解析网络数据包时，使用网络字节序解析，参见下表。 C语言的数据类型和Python的数据类型对照表请参见下表。 接下来对封包与解包进行举例说明。 version type id content unsigned short unsigned short unsigned int unsigned int 封包...
python3：时间方法，异常处理，系统文件相关模块(os)
文章目录 时间方法 time模块 时间表示方法： time模块的方法 datetime模块 异常处理 触发异常 创建mydiv.py脚本，要求如下： 创建myerror.py脚本，要求如下： os模块 实现ls -R（os.walk） os.path pickle模块 记账脚本 时间方法 time模块 时间表示方法： 时间戳：自1970-1-1 0:00:00到某一时间点之间的秒数 UTC时间：世...
负载均衡群集——LVS+DR模型
一、实验组成 调度器 192.168.100:41 web1 192.168.100:42 web2 192.168.100.43 NFS共享服务器 192.168.100.44 二、实验拓扑 三、实验配置 3.1在调度器配置：192.168.100.41 配置虚拟IP地址（VIP） 调整/proc响应参数 对于 DR 群集模式来说，由于 LVS 负载调度器和各节点需要共用 VIP 地址，应该关闭...
adb无线连接时appium找不到设备
问题描述 以前使用USB连接真机，运行appium时一直正常，连接参数如下： 最近为了方便，使用adb无线连接真机，adb版本为1.0.40，真机安卓版本10，连接后，通过adb devices能够查看到连接的设备: adb无线连接是正常的，但每次运行时appium都找不到无线连接的设备，陷入重启adb循环： 解决流程 1.因为是没找到设备，所以在appium连接参数中增加了"udid&...
Mybatis_CRUD(基于xml的增删改查操作）
dao IUserDao domain User QueryVo SqlMapConfig.xml com.itheima.dao IUserDao.xml com.itheima.test 执行原理图：...
