效果：

HTML部分：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

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

</head>

<body>

<div class="country-profile">

<!--tabs-->

<ul class="tabs-title clearfix">

	<li title="tab1" class="tab-common tabActive">概况</li>

	<li title="tab2" class="tab-common">行政</li>

	<li title="tab3" class="tab-common">经济</li>

	<li title="tab4" class="tab-common">教育</li>

	<li title="tab5" class="tab-common">福利</li>

	<li title="tab6" class="tab-common">风土人情</li>

</ul>

<div class="tab-contents">

<span class="tab-content" id="tab1">

	1这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

<span class="tab-content" id="tab2" style="display:none">

	2这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

<span class="tab-content" id="tab3" style="display:none">

	3这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

<span class="tab-content" id="tab4" style="display:none">

	4这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

<span class="tab-content" id="tab5" style="display:none">

	5这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

<span class="tab-content" id="tab6" style="display:none">

	6这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

	这是内容这是内容这是内容这是内容

</span>

</div>

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

<script type="text/javascript">

$(function(){

$(".tabs-title li").bind("click",function(){

    $(this).addClass("tabActive").siblings().removeClass("tabActive");

    var tagTitle=$(this).attr("title");

    $("#" +tagTitle).show("slow").siblings().hide("slow");

});

});

</script>

</body>

</html>

css部分：

*{

		margin:0;

		padding: 0;

	}

.clearfix:after{

	content: ".";

	display: block;

	height: 0;

	visibility: hidden;

	clear: both;

}

.clearfix{*zoom:1;}

.country-profile {

width: 500px;

height: 220px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

background-color: #eee;

}

li{

    	list-style: none;

    }

.tab-content {

margin-top: -20px;

padding: 10px;

}

    .tabs-title {

display: inline-block;

}

.tabs-title li{

	float: left;

}

.tab-common {

	width: 82px;

	padding: 5px 0;

	background-color: #333;

	color: #fff;

	margin-left: 1px;

	text-align: center;

	cursor: pointer;

}

.tabActive{

	position: relative;

	color:orange;

}

.tabActive:after{

	content: '';

	border-style: solid;

	border-width: 0 4px 8px 4px;

	border-color:transparent transparent #fff transparent;

	position: absolute;

	bottom:-2px;

	left:50%;

	margin-left: -4px;

}

.country-flag {

	width:240px;

	height: 203px;

        float: left;

}

　　

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

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

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

  2. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  3. 非常实用的JQuery的选项卡切换源码

    <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...

  4. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

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

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

  7. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  8. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

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

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

随机推荐

  1. [小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证

    在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读取证书的相关信息,然后在发送 HTTP 登录请求时顺便在 Header 字段附加上身份信息.服务器端处理这 ...

  2. Mysql查看连接端口及版本

    C:\Users\Administrator>mysql -uroot -pEnter password: *****Welcome to the MySQL monitor. Commands ...

  3. 网页HTML

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  4. MVC 5.0 之奇葩错误-<类型“ASP._Page__ViewStart_cshtml”不从“System.Web.WebPages.StartPage”继承>

    在实际项目中,我们通常添加MVC项目会先添加一个MVC Empty 的项目,然后需要什么在往里面添加. 但是Empty项目里面只有一个路由注册,而且没有_ViewStart.cshtml文件需要自己添 ...

  5. 如何查看Android SDK源码版本

    PLATFORM_VERSION := 4.2.2 位于/build/core/version_defaults.mk # # Copyright (C) 2008 The Android Open  ...

  6. C3P0连接池配置方式

    c3p0的配置方式分为三种,分别是 1.setters一个个地设置各个配置项 2.类路径下提供一个c3p0.properties文件 3.类路径下提供一个c3p0-config.xml文件 1.set ...

  7. ios app开发步骤

    虽然开发一个app的任务看上去可能很艰巨,但是整个过程可以抽象成几个相对简单的步骤,下面这些步骤会在你开发第一个app时帮你步入正途. 定义Concept 每个好app都是从一个concept开始. ...

  8. Python入门-----介绍

    摘要:Python语言的特点 ----->优雅.明确.简单 一.Python适合的领域 web网站和各种网络服务 系统工具和脚本 作为“胶水”语言,把其他语言开发的模块包装起来方便使用 二.Py ...

  9. Jasper_pass data_from main report to subReport (local CSV)

    <dataSourceExpression><![CDATA[$P{REPORT_DATA_SOURCE}]]></dataSourceExpression>< ...

  10. python 3.5 猜数字游戏

    #!/usr/bin/env python #encoding: utf-8 number = 88 for i in range(1,6): num = int(input('gusee numbe ...