效果：

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. Rational AppScan 扫描大型网站

    Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...

  2. 开源中国安卓client源代码学习(一) 渐变启动界面

    开源中国安卓client源代码学习(一) 渐变启动界面 准备学习安卓开发, 看到网上有人推荐开源中国安卓client的源代码, 说里面包括了大部分技术, 于是准备好好研究研究. 特开通此系列博客来记录 ...

  3. 标准爬虫初探，来自Python之父的大餐！

    首先不得不承认自己做了标题党.本文实质是分析500lines or less的crawlproject,这个project的地址是https://github.com/aosabook/500line ...

  4. Linux中的小程序—— 进度条

    在说正事之前,首先科普一下在什么是回车什么是换行? 我们通常所说的回车就是从一行的末尾跳到另一行的开头,但事实上这却是由回车和换行两个动作所完成的,也就是键盘上<enter>所完成的工作. ...

  5. vim的基本使用方法

    头记:vim作为被大多数程序员所推崇的编辑器,是源于它的自由灵活以及令人舒服的输入模式,但对于新手来说无疑是个噩梦(需要记太多的命令), 而作为使用了vim有一段时间的我来说,总结下常用的命令,以备新 ...

  6. java开发的web下载大数据时的异常处理

    同事用java开发了一个系统,其中有一个功能是下载大约10万笔数据到Excel中.当上线后,很多用户反映下载数据量大的时候就不能成功,但有时可以,所以结论就是系统不稳定,这个问题拖了很久没有解决. 在 ...

  7. Jqgrid的用法总结与分页功能的拓展

    这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...

  8. webview笔记

    1. 用户上传文件 webChromeClient的onShowFileChooser这个方法,这将打开一个文件选择器,如果要取消这个请求则是调用filePathCallback.onReceiveV ...

  9. Word 2010发布博客文章

    只测试了cnblog 1．新建文件选择word 2010自带的博客文章模板 2．在管理账户中新建一个博客账户,也就是你自己在博客园的账户,博客选其他 3．然后选择下一步,博客的URL在自己的博客设置里 ...

  10. [Leetcode][021] Merge Two Sorted Lists (Java)

    题目在这里: https://leetcode.com/problems/merge-two-sorted-lists/ [标签]Linked List [题目分析]这个题目就是merge sort在 ...