做了一个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. 一个看起来不像中年人的中年人，带着两个初出茅庐的小伙子儿，用git管理项目代码的进击之路

    一个中年人的孤独前行 我们这一代人,是上个世纪的人,活在当下,已然成为社会上的中流砥柱. 80年代生人,遥望我们的父辈,均是5.60年代的人,迟迟暮年,夕夕老矣.而我们,正当年,却又时光飞逝,很快便要 ...

  2. java学习笔记之集合家族2

    集合体系 一．数据结构 List集合储存数据结构 <1>堆栈结构 特点:先进后出 <2>队列结构 特点:先进先出 <3>数组结构 特点:查询快,增删慢 <4& ...

  3. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  4. 四、Spring Boot 多数据源 自动切换

    实现案例场景: 某系统除了需要从自己的主要数据库上读取和管理数据外,还有一部分业务涉及到其他多个数据库,要求可以在任何方法上可以灵活指定具体要操作的数据库.为了在开发中以最简单的方法使用,本文基于注解 ...

  5. Django的Form(二)

    上一篇已经简单介绍了Django的Form,现在开始进阶操作了 ..... 创建Form类的时候,主要涉及到Form字段和Form的插件,字段用于做form验证,插件用来生成HTML DjiangoF ...

  6. intelli idea中配置Tomcat找不到的解决办法

    这两天新入职一家公司,公司用的是intelli idea,以前用习惯了eclipse,感觉到有点不太习惯,当然,intelli idea也有自己的强大之处.在开始配置Tomact之前,按照网上的说法, ...

  7. AsyncLocal的运作机制和陷阱

    这是今天帮柠檬分析一个AsyncLocal相关的问题时发现的. 试想这个代码输出的值是多少? using System; using System.Threading; using System.Th ...

  8. 9.python面向对象编程

    面向对象的几个核心特性如下 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一 ...

  9. Spring框架中ModelAndView、Model、ModelMap区别

    原文地址:http://www.cnblogs.com/google4y/p/3421017.html SPRING框架中ModelAndView.Model.ModelMap区别   注意:如果方法 ...

  10. hibernate 3.6.10 maven pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...