效果:

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 ...