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. 关于vue开发的常见问题

    一.vue单页面回退丢失参数的问题 可能有些跟我一样的新手同学会遇到一个问题,就是比如我从商品详情跳转到购物车,没问题,但是,购物车页面中点击浏览器的回退按钮,返回到detail页面时,你的动态数据( ...

  2. 前端每日实战：67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...

  3. python的main函数

    代码示例:test.py import sys if __name__ == '__main__' size = len(sys.argv) p1 = sys.argv[] p2 = sys.argv ...

  4. 常见HTTP错误代码

    了解更多HTTP错误代码 一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态 ...

  5. linux0.11内核源码——用户级线程及内核级线程

    参考资料:哈工大操作系统mooc 用户级线程 1.每个进程执行时会有一套自己的内存映射表,即我们所谓的资源,当执行多进程时切换要切换这套内存映射表,即所谓的资源切换 2.但是如果在这个进程中创建线程, ...

  6. 实验1 C语言环境使用和数据类型 运算符 表达式

    Part1 经过练习我发现自己经长会漏掉分号,有时输入法不同,打出来的括号前后不同,还有转义字符的使用,大小写转化之间的表达.还有打字速度比较慢. Part2 #include<stdio.h& ...

  7. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

  8. linux设备驱动学习笔记--内核调试方法之printk

    1,printk类似于用户态的printf函数,但是比printf函数多了一个日志级别,内核中最常见的日志输出都是通过调用printk来实现的,其打印级别有8种可能的记录字串, 在头文件 <Li ...

  9. 建站手册-网站建设： Web 标准

    ylbtech-建站手册-网站建设: Web 标准 1.返回顶部 1. http://www.w3school.com.cn/site/site_standards.asp 2. 2.返回顶部 1. ...

  10. Visual Studio Code-调试Node.js代码

    打开js文件 F0下断点 F5调试 PS:配置了launch.json会默认执行调试配置的js