做了一个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. 用shell制作IP脚本

    vim  ip.sh #!/bin/bashread -p "eth:" eread -p "ip:" ip1read -p "netmask:&qu ...

  2. Git 二分调试法，火速定位疑难Bug！

    你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码.屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样 ...

  3. Linux----CentOS-7搭建免流服务器

    本次实验采用腾讯云服务器:https://cloud.tencent.com/ 大学生身份的可以看看有没有什么活动购买 其他身份的78一个月 关于腾讯云服务器的使用可以看看腾讯云的使用手册 本博客涉及 ...

  4. mapreduce作业reduce被大量kill掉

    之前有一段时间.我们的hadoop2.4集群压力非常大.导致提交的job出现大量的reduce被kill掉.同样的job执行时间比在hadoop0.20.203上面长了非常多.这个问题事实上是redu ...

  5. mysql并行复制降低主从同步延时的思路与启示

    一.缘起 mysql主从复制,读写分离是互联网用的非常多的mysql架构,主从复制最令人诟病的地方就是,在数据量较大并发量较大的场景下,主从延时会比较严重. 为什么mysql主从延时这么大? 回答:从 ...

  6. 项目启动时候spring是如何加载和实例化各类的

    1.对于注解为默认的,也就是@score不写的,默认是单例的类,这些类在项目启动的时候会依次被加载并被实例化.默认调用的是无参数的构造器. 2.而对于注解是prototype类型的,即@Scope(& ...

  7. IDEA 初始配置教程

    IDEA 初始配置教程 如果你是第一次使用 IDEA,或者对 IDEA 常用配置仍然不熟悉,那么本文就特别适合你. 本文只是根据我自己的使用经验来进行配置,不一定适合所有的情况,但是对你肯定会有帮助. ...

  8. Struts的使用

    一.Struts2的获取 Struts的官方网站为:http://struts.apache.org/ 下载完Struts2的jar包,解压,Struts2资源包的目录结构如下图: apps目录下包含 ...

  9. iOS 多线程 之 GCD（大中枢派发）(一)

    导语: 本文个人原创,转载请注明出处(http://www.cnblogs.com/pretty-guy/p/8126981.html) 在iOS开发中多线程操作通常是一下3种,本文着重介绍Dispa ...

  10. 【python】input、int、if-else、注释、while、module(random.randint())语法示例

    import random luckyNum=random.randint(2,9) i=1 while i<=3: guessNum=input("请你猜猜我的幸运号码:" ...