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; background:url(../img/bg_2.png) repeat-x;  border:1px solid #A1AFB9; border-bottom:none; position:relative;   cursor:pointer;  margin-right:5px; }

.box ul li.two { background:url(../img/bg_3.png) repeat-x;}

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

* html .content { margin-top:-1px;}

.box ul li.one { background:#fff;}

　　js

$(document).ready(function(){

	$('.ct:gt(0)').hide();

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

		hdw.hover(function(){

		$(this).addClass('two')

				.siblings().removeClass('two');

		});

	hdw.click(function(){

		$(this).addClass('one')

				.siblings().removeClass();

	var hdw_index = hdw	.index(this);

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

			.siblings().hide();

		});

	});

　　图片：

效果：

jquery 选项卡切换 带背景图片的更多相关文章

  1. js实现点击切换checkbox背景图片

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  2. 用jquery向网页添加背景图片 拉伸 模糊 遮罩层 代码

    方法一:手动添加 1.在body内任意位置添加html代码 <div id="web_bg" style=" position:fixed; _position:a ...

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

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

  4. jquery 选项卡切换

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

  5. jquery选项卡切换

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

  6. jQuery上下切换带缩略图的焦点图

    在线演示 本地下载

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

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

  8. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

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

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

随机推荐

  1. BZOJ1899 [Zjoi2004]Lunch 午餐 贪心+DP

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1899 题解 如果只有一个窗口,那么可以这样考虑:因为最后一个人打完饭的时间是固定的,那么不如就 ...

  2. apache2 配置入门

    ServerRoot "/usr/local/apache2" #服务器根目录 Listen #监听端口 语法格式为Listen [IP地址:]端口 [协议],其中IP地址与协议为 ...

  3. MySQL-触发案列

    1.更新案例 DELIMITER $$ USE `haochacang`$$ DROP TRIGGER /*!50032 IF EXISTS */ `customer_info_update`$$ C ...

  4. 使用CSS在页面中嵌入字体

    http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html 首先感谢css9.net照抄原话: 字体使用是网页设计中不可或缺的一部分. ...

  5. php strtok()函数 语法

    php strtok()函数 语法 作用:逐一分割字符串大理石构件 语法:strtok(string,split) 参数: 参数 描述 string 必需.规定要分割的字符串. split 必需.规定 ...

  6. 从头开始开发一个vue幻灯片组件

    首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件 因为我写的代码不规范, 通不过eslint的检测, 会频繁 ...

  7. 图与例解读Async/Await

    JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...

  8. php7.0 新增运算符??

    ??是php7 新增符号 其作用近似于三目运算符 ?: 但存在着细微差别 比较示例代码如图:         $b = $a?$a:2; 三目运算 <=>     $e = $a??'ho ...

  9. 信息安全-攻击-XSS：XSS/CSS 攻击

    ylbtech-信息安全-攻击-XSS:XSS/CSS 攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序.这些恶意 ...

  10. 洛谷P2387 [NOI2014]魔法森林(LCT)

    魔法森林 题目传送门 解题思路 把每条路按照\(a\)的值从小到大排序.然后用LCT按照b的值维护最小生成树,将边按照顺序放入.如果\(1\)到\(n\)有了一条路径,就更新最小答案.这个过程就相当于 ...