做了一个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. arguments,caller,callee之理解

    arguments对象代表正在执行的函数和调用它的函数的参数,arguments是一个不是数组但类似 数组的对象,它具有同数组一样的访问性质及方式,可以由arguments[n]来访问对应单个参数的值 ...

  2. 探索版 webstorm快捷方式

    ctrl + alt + s            打开配置面板 Settings   国内的资料比较少,大概很多人已经放弃了原生快捷方式,不过我打算通关原生快捷方式.   在配置面板中  IDE S ...

  3. 最全Pycharm教程（32）——依据FHS在Linux上安装Pycharm

    1.主题 怎样在Linux上安装Pycharm,依据FHS. 2.平台要求 Intel Pentium III/800 MHz或更高. 内存最小512M.建议1G以上 屏幕最小分辨率1024x768 ...

  4. DirectX：在graph自己主动连线中增加自己定义filter(graph中遍历filter)

    为客户提供的视频播放的filter的測试程序中,採用正向手动连接的方式(http://blog.csdn.net/mao0514/article/details/40535791).因为不同的视频压缩 ...

  5. hdu5303Delicious Apples

    题意大概就是有n框苹果放在长度为L的环上,每框有ai个苹果.你有一个容量为k的框.要你从0点处出发,随意走.框满了就回到0点把苹果放在那里.继续走直到把苹果都拿完为止.问你最少要走多少路程. 首先贪心 ...

  6. JAVA入门[2]-安装Maven

    一.资料 1.官网: https://maven.apache.org/ 二.下载Maven 下载地址:https://maven.apache.org/download.cgi# 三.Windows ...

  7. 聊聊属性方法property的用法

    写之前随便百度了一下博客,又看到廖雪峰的博客了.果然置顶的能力很强. 我想说其实property的用法并不是主要用来做类型检查.反而更多应该是用于简化操作的目的. 写之前想聊一个古老的话题.年初的时候 ...

  8. Linux主机SSH免密设置解析

    为了保证一台Linux主机的安全,所以我们每个主机登录的时候一般我们都设置账号密码登录.但是很多时候为了操作方便,我们都通过设置SSH免密码登录.那么该如何设置?是不是免密码登录就不安全了呢? 一.被 ...

  9. Parcel：常见技术栈的集成方式

    前言 Parcel 是什么 Parcel 是一个前端构建工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具.没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工 ...

  10. 人工智能技术实践篇：espeak开发环境调试

    一.前言 1.espeak版本: espeak-1.48.04-source 2.开发环境:VC+2015 二.正文 2.1 错误提示 LNK1104: cannot open file 'LIBC. ...