效果：

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. resin config 中文(resin.xml)

    <!-- - Resin 3.1 配置文件. --> <resin xmlns="http://caucho.com/ns/resin" xmlns:resin= ...

  2. JavaScript学习(2)

    时间就像海绵里的水,要挤总还是有的,所以在最近不是太忙的时间里,我选择了挤时间,一点点的挤出了大把的时间,于是乎便迎来了我对javascript的第二阶段的学习,首先说下, 说起JavaScript大 ...

  3. Java可见性机制的原理

    基本概念 可见性 当一个线程修改了共享变量时,另一个线程可以读取到这个修改后的值. 内存屏障(Memory Barriers) 处理器的一组指令,用于实现对内存操作的顺序限制. 缓冲行 CPU告诉缓存 ...

  4. linux修改主机名-IP

    1.查看当前主机名  hostname 2. ifconfig   显示所有网络接口的信息  ifconfig eth0   显示网卡eth0的信息 3.临时修改主机名 hostname rusky. ...

  5. 常用元素的属性/方法 attr / val / html /text

    常用元素的属性/方法 得到一个元素的高度, $("#myid").height() 得到一个元素的位置, $("#myid").offset() 返回的是一个o ...

  6. OD: Format String, SQL Injection, XSS

    Format String 格式化串漏洞 考虑如下的代码: #include<stdio.h> int main() { int a=44,b=77; printf("a=%d, ...

  7. c - 冒泡/选择排序.

    #include <stdio.h> #define LEN 10 #define TRUE 1 #define FALSE 0 /* 对 10 个数进行排序 */ //选择排序法(值得注 ...

  8. 在TCP协议下的数据传送

    本人小白菜逼一枚,,,,刚建立博客,也写不了太深入的,就写点上课的笔记什么的.有错误希望广大博友指出,我一定虚心学习接收改正. 我的新浪邮箱:liudaohui0805@sina.com 我的QQ邮箱 ...

  9. IE6~9的css hack写法

    _color: red; /* ie6 */ *color: red; /* ie6/7 */ +color: red; /* ie6/7 */ color: red\0; /* ie8/9 */ c ...

  10. php 中_set()_get()实例解析

    <?php class Person { // 下面是人的成员属性, 都是封装的私有成员 private $name; // 人的名子 private $sex; // 人的性别 private ...