js版本的tab切换

于 2013-11-11 18:32:27 发布
阅读量3.9k 收藏
点赞数
分类专栏： JavaScript&CSS 文章标签： js tab css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quweiie/article/details/15341767
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tabbox {
	overflow:hidden;
	width: 728px;
}
.tab_con {
	display:none;
}
.tabs {
	height: 35px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	color:#660000;
}
.tabs li {
	height:34px;
	line-height:31px;
	float:left;
	overflow: hidden;
	position: relative;
	margin-bottom: -1px;
	margin-left: 10px;
	border: 1px solid #CCCCCC;
	width: 105px;
	font-size: 14px;
}
.tabs li a {
	display: block;
	padding: 0 20px;
	outline: none;
	color:#666666;
}
.tabs li a:hover {
}
.tabs .thistab, .tabs .thistab a:hover {
	background-image: url(images/xxkbj.gif);
	background-repeat: repeat-x;
	font-size: 14px;
}
.tab_con {
	padding:12px;
	font-size: 14px;
	line-height:175%;
	color:#666666;
}

#gongneng #tabbox ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#xxkanolik {
	text-decoration: none;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
		$(tab_conbox).find("li").hide();
		$(tabtit).find("li:first").addClass("thistab").show(); 
		$(tab_conbox).find("li:first").show();
	
		$(tabtit).find("li").bind(shijian,function(){
		  $(this).addClass("thistab").siblings("li").removeClass("thistab"); 
			var activeindex = $(tabtit).find("li").index(this);
			$(tab_conbox).children().eq(activeindex).show().siblings().hide();
			return false;
		});
	
	};
	/*调用方法如下：*/
	$.jqtab("#tabs","#tab_conbox","click");
	
	$.jqtab("#tabs2","#tab_conbox2","mouseenter");
	
});
</script>
</head>

<body>
<div id="gongneng">
          <!----选项卡开始----->
          <div id="tabbox">
            <ul id="tabs" class="tabs">
              <li class="thistab"><a href="#">核心功能</a></li>
              <li><a href="#">系统介绍</a></li>
              <li><a href="#">行业客户</a></li>
              <li><a href="#">升级下载</a></li>
            </ul>
            <ul id="tab_conbox" class="tab_conbox">
              <li class="tab_con" style="display: list-item;">
                <div id="yy_dx">
                  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tbody><tr>
                      <td width="22%" align="center" rowspan="2"><div id="pro_yylogo"> <a title="点击了解详细" target="_blank" href="/static/Procrm/">
                          <div id="pro_yycon">CRM</div>
                          </a> </div></td>
                      <td width="28%"><div id="size16">客户管理</div></td>
                      <td width="22%" align="center" rowspan="2"><div id="pro_yylogo"> <a title="点击了解详细" target="_blank" href="/static/xtfwguanli/">
                          <div id="pro_yycon">CRM</div>
                          </a> </div></td>
                      <td width="26%"><div id="size16">服务管理</div></td>
                    </tr>
                    <tr>
                      <td valign="top"><div id="jw_con"> 目标-意向-成交客户统一管理<br>
                          客户售前-售中-售后完整记录<br>
                          强大的关联性<br>
                          商机挖掘-评估-分配<br>
                        </div></td>
                      <td valign="top"><div id="jw_con"> 接单-派工-反馈 形成服务闭环<br>
                          服务自定义表单<br>
                          服务状态及时跟踪<br>
                          服务员工排名分析<br>
                        </div></td>
                    </tr>
                  </tbody></table>
                  <div id="butthr"></div>
                  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tbody><tr>
                      <td width="22%" align="center" rowspan="2"><div id="pro_yylogo"> <a title="点击了解详细" target="_blank" href="/static/xsguanli/">
                          <div id="pro_yycon">CRM</div>
                          </a> </div></td>
                      <td width="28%"><div id="size16">销售管理</div></td>
                      <td width="24%" align="center" rowspan="2"><div id="pro_yylogo"><a title="点击了解详细" target="_blank" href="/static/mubiao/"><img border="0" src="/PublicFile/images/imglogo/crmlogo2.jpg"></a></div></td>
                      <td width="26%"><div id="size16">目标行动</div></td>
                    </tr>
                    <tr>
                      <td valign="top"><div id="jw_con"> 销售自动化分析<br>
                          销售跟单及时跟踪和自动提醒<br>
                          销售任务整体分析<br>
                          部门成交分析，部门员工业绩检视<br>
                        </div></td>
                      <td valign="top"><div id="jw_con">做好计划,抓好落实<br>
                          搭建工作模式<br>
                          制定《企业行为管理基本法》<br>
                          让执行100%落实到位！ </div></td>
                    </tr>
                  </tbody></table>
                  <div id="butthr"></div>
                  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tbody><tr>
                      <td width="22%" align="center" rowspan="2"><a title="点击了解详细" target="_blank" href="/static/ProOa/">
                        <div id="pro_yylogo">
                          <div id="pro_yycon">OA</div>
                        </div></a></td>
                      <td width="28%"><div id="size16">OA</div></td>
                      <td width="24%" align="center" rowspan="2"><div id="pro_yylogo"><a title="点击了解详细" target="_blank" href="/static/goutong/"><img border="0" src="/PublicFile/images/imglogo/crmlogo4.jpg"></a></div></td>
                      <td width="26%"><div id="size16">沟通平台</div></td>
                    </tr>
                    <tr>
                      <td valign="top"><div id="jw_con">强大自定义工作流引擎，<br>
                          简单自定义配置，<br>
                          让工作流从复杂走下神坛；<br>
                          如合同、报价、出差、报销等。</div></td>
                      <td valign="top"><div id="jw_con">搭建各部门沟通平台，<br>
                          以便企业内部上下、左右的信息传递，<br>
                          促使员工协同工作。</div></td>
                    </tr>
                  </tbody></table>
                  <div id="butthr"></div>
                  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tbody><tr>
                      <td width="22%" align="center" rowspan="2"><div id="pro_yylogo"><a title="点击了解详细" target="_blank" href="/static/Episteme/"><img border="0" src="/PublicFile/images/imglogo/crmlogo5.jpg"></a></div></td>
                      <td width="28%"><div id="size16">知识<br>
                          平台</div></td>
                      <td width="24%" align="center" rowspan="2"><div id="pro_yylogo"><a title="点击了解详细" target="_blank" href="/static/ProWenhua/"><img border="0" src="/PublicFile/images/imglogo/crmlogo6.jpg"></a></div></td>
                      <td width="26%"><div id="size16">企业<br>
                          文化</div></td>
                    </tr>
                    <tr>
                      <td valign="top"><div id="jw_con">提供便捷的“人才复制”和“管理复制”方法<br>
                          做到“人在有改善、人走无影响” </div></td>
                      <td valign="top"><div id="jw_con">找到一套套路化搭建企业文化的方法，<br>
                          迈入“基业长青”的第一步</div></td>
                    </tr>
                  </tbody></table>
                </div>
              </li>
              <li class="tab_con" style="display: none;">
                <div id="addheight"></div>
                <img src="../../../../PublicFile/images/product/crm/crm1.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm2.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm3.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm4.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm5.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm6.jpg">
                <img src="../../../../PublicFile/images/product/crm/crm7.jpg">             
              </li>
              <!---open--->
              <li class="tab_con" style="display: none;">
                <div class="class1">
                  <h1 id="proh1">服装行业</h1>
                  <span οnclick="$use('class1content','stateBut')" id="stateBut">展开+</span>
                  <div id="class1content">
                    <table width="100%" cellspacing="1" border="0" bgcolor="#CCCCCC">
                      <tbody><tr>
                        <td bgcolor="FFFFFF"><span id="protable">金利来皮具</span></td>
                        <td bgcolor="FFFFFF"><span id="protable">山东青岛暖倍儿服饰有限公司</span></td>
                        <td bgcolor="FFFFFF"><span id="protable">江西省南昌市经典保罗</span></td>
                      </tr>
                    </tbody></table>
                  </div>
                </div>
                <div class="class1">
                  <h1 id="proh1">机械设备 / 电线电缆</h1>
                  <span οnclick="$use('class9content','stateBut8')" id="stateBut8">展开+</span>
                  <div id="class9content">
                    <table width="100%" cellspacing="1" border="0" bgcolor="#CCCCCC">
                      <tbody><tr>
                        <td bgcolor="FFFFFF"><span id="protable">山东富士制御电梯有限公司</span></td>
                        <td bgcolor="FFFFFF"><span id="protable">北京麦迪戴克医疗技术有限公司</span></td>
                        <td bgcolor="FFFFFF"><span id="protable">温州至盛机电有限公司</span></td>
                      </tr>
                    </tbody></table>
                  </div>
                </div>
              </li>
              <!---end--->
              <li class="tab_con" style="display: none;">
                <div id="addheight"></div>
                <a title="任我行协同CRM9.1/分模块版/OA升级包下载地址" target="_blank" href="http://ftp.grasp.com.cn/wecrm/graspcrmUpdate2v9.1.rar">
                <div class="ranklist">任我行协同CRM9.1/分模块版/OA升级包下载地址</div>
                </a><br>
                
              </li>
            </ul>
          </div>
          <!----选项卡结束----->
        </div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值