做了一个tab页切换。点击不同tab,显示对应的内容信息

如图

=================HTML=====================

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>

<head>
<title> RunStyle </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/runstyle.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/runstyle.js"></script>
</head>

<body>

<!--content-->
<div class="content">
<ul class="tabnav">
<li class="current"><a href="javascript:void(0);">公司介绍</a><span>|</span></li>
<li><a href="javascript:void(0);">产品介绍</a><span>|</span></li>
<li><a href="javascript:void(0);">办公地址</a></li>
</ul>
<div class="tabcon gsjs">
<p>资产管理有限公司成立于2015年8月
</p>
<p>截至2015年10月31日，合作经纪人已突破 4000人。</p>
<p>成立3个月内，放款额已突破6亿元。</p>
</div>
<div class="tabcon cpjs">
<p>“合法便捷、抵押担保、利率优惠、专业风控、资深法务”
</p>
<p>在借款人提供完整资料的基础上，。</p>
</div>
<div class="tabcon bgdz">
<p><strong>北京总部：</strong></p>

<p><strong>上海分公司地址：</strong></p>

<p><strong>广州分公司地址：</strong></p>

</div>
</div>
<!--content-->

</body>

</html>

==========CSS===============

@charset "utf-8";

/*content*/

.content {
width: 1200px;
height: 590px;
margin: 0 auto;
}
.content .tabnav {
width: 960px;
height: 110px;
margin: 30px auto 10px;
text-align: center;
clear: both;
}
.tabnav .current {
background: url(../images/tabnav-bg.png) no-repeat center 60px;
width: 310px;
height: 80px;
}
.tabnav li {
display: inline-block;
width: 310px;
}
.tabnav li a {
font-size: 30px;
color: #333333;
font-weight: 150;
}
.tabnav span {
font-size: 30px;
color: #DDDDDD;
float: right;
}
.content .tabcon {
width: 960px;
height: 450px;
margin: 0 auto;
padding-top: 190px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content .tabcon.gsjs {
background: url(../images/runstyle-company-logo.png) no-repeat center 20px;
}
.content .tabcon.cpjs {
background: url(../images/cpjs-bg.png) no-repeat center 20px;
padding-top: 230px;
display: none;
}
.content .tabcon.bgdz {
background: url(../images/bgdz-bg.png) no-repeat 60px 10px;
padding-top: 10px;
padding-left: 460px;
display: none;
}
.content .tabcon p {
color: #323232;
font-size: 16px;
line-height: 28px;
text-indent: 2em;
}
.content .tabcon .margin-bottom {
margin-bottom: 20px;
}
/*content*/

==========JS===========

$(document).ready(function() {
$(".tabCon:first").show();
$(".tabnav li").click(function() {
//alert($(this).index());把span放在li里面，这样点击弹出的是自己的数值
$(".current").removeClass("current");
$(this).attr("class", "current");
$(".tabcon").hide();
$(".tabcon").eq($(this).index()).show();
});
});

=====================

感谢一棵树-江华,完善

下载地址：http://files.cnblogs.com/files/leshao/tab%E9%A1%B5%E5%88%87%E6%8D%A2.rar

tab页切换的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  3. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  4. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  5. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. bootstrap Tab页切换

    <ul class="nav nav-tabs" id="otherInfoTab"> <li class="active" ...

  7. ReactJS尝鲜：实现tab页切换和菜单栏切换和手风琴切换效果，进度条效果

    前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  8. 小技巧之Selenium如何切换到弹出的Tab页中

    今天群里讨论了一个问题,如何将selenium的操作焦点切换到浏览器中新弹出来的Tab页中,正好对应到了昨天的那篇文章“小技巧之在浏览器中打开新的页签”.今天就带大家来解决这个问题: 先封装一个Tab ...

  9. Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的！

    我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity androi ...

随机推荐

  1. mongoDB之集合操作

    mongoDB之集合操作 mongoDB中的集合相当于mysql中的表. mongoDB中集合的创建: 第一种方式:不限制集合大小   db.createCollection("集合名称&q ...

  2. NS3网络仿真（10）： 解析以太网帧

    快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载.但请保留作者信息 解析以太网帧的过程是构建以太网帧的逆过程,当我们接收到一个以太网帧时,仍然以上一节中的ARP帧为例 ...

  3. ZED-Board从入门到精通系列（八）——Vivado HLS实现FIR滤波器

    http://www.tuicool.com/articles/eQ7nEn 最终到了HLS部分.HLS是High Level Synthesis的缩写,是一种能够将高级程序设计语言C,C++.Sys ...

  4. CUDA编程（六）进一步并行

    CUDA编程(六) 进一步并行 在之前我们使用Thread完毕了简单的并行加速,尽管我们的程序运行速度有了50甚至上百倍的提升,可是依据内存带宽来评估的话我们的程序还远远不够.在上一篇博客中给大家介绍 ...

  5. &lt;转&gt; Libvirt学习总结

    感谢朋友支持本博客.欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/gaoxingnengjisua ...

  6. [Python学习] 简单网络爬虫抓取博客文章及思想介绍

            前面一直强调Python运用到网络爬虫方面很有效,这篇文章也是结合学习的Python视频知识及我研究生数据挖掘方向的知识.从而简介下Python是怎样爬去网络数据的,文章知识很easy ...

  7. linux命令的排列、替换与别名

    命令的排列; 1.使用";" 命令语法: 命令1;命令2 当运行该命令时,无论命令1是否出错.接下来就运行命令2 2.使用"&&" 命令语法:命 ...

  8. flask框架-decorator装饰器

    调用包: from functools import wraps 装饰器其实就是一个函数:参数是一个函数,返回值是一个函数 1.装饰器使用是通过@符号,在函数的上面 2.装饰器中定义的函数,要使用*a ...

  9. url_for()中的坑,url_for操作对象是函数，而不是route里的路径

    url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径.

  10. ligerUI---ligerForm中下拉框使用

    写在前面: 最近项目的前框框架用的是ligerUI,一开始我是拒绝的,因为貌似ligerUI很少有人用,我真的很想问我们team的斌哥哥为什么要用ligerUI来做前端框架?????(啊哈哈哈,用什么 ...