html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>选项卡切换</title>

	     <link rel="stylesheet" href="css/test.css" />

		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>

		<script type="text/javascript" src="js/test.js" ></script>

	</head>

	<body>

<div class="box">

<ul>

<li class="one">Tab1</li>

<li>Tab2</li>

<li>Tab3</li>

</ul>

<div class="content">

<div class="ct">Practice makes perfect.熟能生巧. </div>

<div class="ct">.God helps those who help themselves.天助自助者. </div>

<div class="ct">All work and no play makes jack a dull boy.只工作不玩耍,聪明孩子也变傻. </div>

</div>

　　css

* { padding:0; margin:0;}

body { font-size:12px; padding:100px;}

ul { list-style-type:none;}

.box ul { height:30px; line-height:30px;}

.box ul li { float:left; padding:0 10px; position:relative; cursor:pointer; border:1px solid #000; margin-right:5px; border-bottom:none;}

.box ul li.two { background:#eee;}

.content { width:325px; border:1px solid #000; padding:10px; height:100px;}

* html .content { margin-top:-1px;} //浏览器兼容iE6

.box ul li.one {

	background-color: black;

	color:white ;

	}

　　js

$(document).ready(function(){

	$('.ct:gt(0)').hide();   //内容大于0的隐藏    gt(0) 大于0

	var bt = $('.box ul li');

	bt.hover(function(){

		$(this).addClass('two').siblings().removeClass('two');   //当前元素添加class 同级元素移除class

		});

       bt.click(function(){

		$(this).addClass('one').siblings().removeClass();

	//将标题的索引跟内容索引联系起来

	var content_index = bt.index(this);

	
       //内容切换

	$('.ct').eq(bt.index(this)).show()

			.siblings().hide();

		});

	});

　　效果：

09:52:18   2017-09-24

jquery 选项卡切换的更多相关文章

  1. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  2. jquery 选项卡切换 带背景图片

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. jquery选项卡切换

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  4. jQuery 选项卡切换过渡效果

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> ...

  5. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  8. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  9. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

随机推荐

  1. 全球的IPv6部署急剧增加，但中国几乎没有一个地方部署？

    全球的IPv6部署继续增加,但中国在IPv6方面还需要努力,从部署图上分析,中国几乎没有几个地方是普及IPv6的.这6年来,自世界IPv6发布以来,全球网络和服务提供商的IPv6部署水平急剧增加.如图 ...

  2. 人生苦短_我用Python_configparser/yaml对配置文件读取/写入操作_010

    第一,我们先开始安装yaml库,configparser是自带库,yaml库是针对读取yml文件,configparser现阶段我只用于读取conf文件 首先:1)对象文件为:data.yml,下面的 ...

  3. HDU 5667 构造矩阵快速幂

    HDU 5667 构造矩阵快速幂 题目描述 解析 我们根据递推公式 设 则可得到Q的指数关系式 求Q构造矩阵 同时有公式 其中φ为欧拉函数,且当p为质数时有 代码 #include <cstdi ...

  4. 第二章--k-近邻算法（kNN）

    一.k-近邻算法(kNN) 采用测量不同特征值之间的距离方法进行分类 工作原理: 存在一个样本数据集合(训练样本集),并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类的对应关系.输 ...

  5. vue-cli2.X环境搭建

    1.先安装nodejs环境https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装node -v np ...

  6. 一片关于Bootstarp4的文章

    一.Bootstarp Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目.可以让你快速的排版,不用在写那些繁杂的样式.Bootstrap是开源免费的,设 ...

  7. mysql实现“存在即更新，不存在即插入”

    方法1:使用replace关键字 replace是insert的增强版,可以实现插入的数据和已存在的数据发生主键或者唯一键重复,则删除已存在的数据,再实现插入,如果不重复,则直接插入数据. 结合Myb ...

  8. MySQL常用的一些语句，索引，字段等

    1.库相关:建库:character set:指定编码COLLATE:排序规则 utf8mb4_general_ci 大小写不敏感CREATE DATABASE `test_db` default c ...

  9. Chrome-逆向分析JS-2获取发送请求位置（以datatables获取表格数据为例）

    剧透:就是使用了一下 Chrome Source 的 XHR/fetch Breakpoints 功能,在发送请求时在该行进入断点调试. # 一:不认识一下 XHR/fetch Breakpoints ...

  10. Linear Regression and Gradient Descent (English version)

    1.Problem and Loss Function   Linear Regression is a Supervised Learning Algorithm with input matrix ...