效果：

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. ZigBee心电传输（三）

    这段时间因为另外一个项目需要,我搞Zed板去了.现在接着上一步的工作吧,继续把心电做完.这里想要测试一下把心电波形数据传输出来,然后用协调器接收,并从串口显示出来.之后再用ZigBee转蓝牙,从而可以 ...

  2. repo简介

    高通的Android JellyBean库已经建立完成,目前已经可以正常访问,可以正常提交.Repo获取代码注意:1. 首先应有一个repo脚本,并将脚本放到环境变量里,此脚本的配置方法a) 进入用户 ...

  3. 【JavaScript】轻易改变的背景和字体颜色页面

    JavaScript,点击button改变页面背景和字体颜色,网页有N颜色的变化button.点击不同button,网页字体和背景将被改变为不同的颜色. 非常easy的JavaScript小程序. 一 ...

  4. sql中的case when

    sql语言中有没有类似C语言中的switch case的语句?? 没有,用case   when   来代替就行了.            例如,下面的语句显示中文年月         select ...

  5. 一个小的程序--实现中英文切换（纯css）

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  6. 前端 JavaScript基础

    前言 JavaScript 是属于网络的脚本语言,被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. 一.如何编写 1.存在形式 方式一:存在js文件中,即写入j ...

  7. XML中 添加或修改时 xmlns="" 怎么删除

    //创建节点时 记得加上  ---> xmldoc.DocumentElement.NamespaceURI XmlElement url = xmldoc.CreateElement(&quo ...

  8. Xcode简易基础篇，以新手角度去操作

    声明:此Newlife XCode非Mac的XCode,避免误会. 日常用的Newlife X组件的相关资源,不限于XCode,只是以XCode组件为主: 1.QQ群:1600800 2.博客 : h ...

  9. 如何改写WebApi部分默认规则

    为什么要改 最近公司在推广SOA框架,第一次正经接触这种技术(之前也有但还是忽略掉吧),感觉挺好,就想自己也折腾一下,实现一个简单的SOA框架 用过mvc进行开发,印象之中WebApi和Mvc好像是一 ...

  10. poj 1080 dp

    基因配对 给出俩基因链和配对的值  求配对值得最大值  简单dp #include<iostream> #include<stdio.h> #include<string ...