jquery大气的图标菜单tab选项卡切换效果代码



155 616 206



特效描述:jquery 大气的图标菜单 tab选项卡切换,大气选项卡切换,图标tab切换效果。jquery tab选项卡代码

代码结构

1. 引入CSS

<link href="style_index.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="DD_belatedPNG.js" tppabs="js/DD_belatedPNG.js" type="text/javascript"></script>

3. HTML代码

<!--header开始 -->
<header>
<!-----------------tow end----------><!-----------------one stare---------->
<script type="text/javascript">
$(function(){
    var tabNum=$(".important").find("li");
    var contentNum=$(".contents").children();
    var timer;
    $(tabNum).each(function(index){
        $(this).hover(function(){
            var that=$(this)
             timer=window.setTimeout(function(){
                $(contentNum).eq(index).css({"display":"block"});
                $(contentNum).eq(index).siblings().css({"display":"none"});
                 that.find("a").css({"background":"#FFF","color":"#fff"});
                 that.find("strong").show();
                 that.siblings().find("strong").hide();
                 that.siblings().find("a").css({"background":"#fff","color":"black"});
            },100)
        },function(){
            window.clearTimeout(timer);
        })
    })
})
</script>
<div class="w1200">
  <div class="title">
    <h1><span>功能</span>展示</h1>
  </div>
<ul class="important cl">
	 <li class="rcsp_1">
		<a><span></span></a>
		<p>日常审批</p>
		<strong><i></i></strong>
	 </li>
	 <li class="rcsp_2">
		<a><span></span></a>
		<p>计划管理</p>
		<strong style="display:none"><i></i></strong>
	 </li>
	 <li class="rcsp_3">
		<a><span></span></a>
		<p>知识管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_4">
		<a><span></span></a>
		<p>客户管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_5">
		<a><span></span></a>
		<p>合同管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_6">
		<a><span></span></a>
		<p>员工信息档案</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_7">
		<a><span></span></a>
		<p>招聘管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_8">
		<a><span></span></a>
		<p>薪酬管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
	 <li class="rcsp_9">
		<a><span></span></a>
		<p>绩效管理</p>
		<strong style="display:none"><i></i></strong>
	</li>
</ul>
<div class="contents">
		<div class="cl">
			<div class="important_l">
				<a><img src="images/071146464hka.jpg"/></a>
			</div>
			<div class="important_r">
			   <div class="title_1">
				  <h3><span>DAILY</span> APPROVAL </h3>
				  <h2>日常审批<span>流程可视</span></h2>
				  <p>梳理企业业务,简化审批流程,提高办公效率</p>
			   </div>
			   <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
			   <div class="study">
				  <h3>日常审批</h3>
				  <span><p><font size="2">日常审批覆盖了财务审批、人事审批(公出、请假、出差、加班)、行政审批(公文、用品、采购)、合同审批等多个工作场景,具有可视化流程和多种催办方式。</font></p></span> <img src="images/17092157z5yc.png"/>
			   </div>
			   <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
			</div>
    </div>
	<div class="cl" style="display: none">
		<div class="important_l"><a><img src="images/170854226k8c.png"/></a></div>
		<div class="important_r">
			<div class="title_1">
			  <h3><span>PROGRAM</span> MANAGEMENT </h3>
			  <h2>计划管理<span>实时把控</span></h2>
			  <p>工作计划轻松梳理,更可通过共享实现“协同办公”。</p>
		   </div>
		   <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
		   <div class="study">
			  <h3>计划管理</h3>
			  <span><p><span style="font-size: small;">计划管理分为&ldquo;个人/部门计划&rdquo;和&ldquo;日/周/月计划&rdquo;两个维度,可自定义计划模板,计划可共享,便于管控、总结、汇报。</span></p></span> <img src="images/17085113rcs3.png"/>
		   </div>
		   <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对计划管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17085130oitn.jpg"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>KNOWLEDGE</span> MANAGEMENT </h3>
          <h2>知识管理<span>企业宝库</span></h2>
          <p>企业知识库持续积累,可进行知识采集发布,应对市场变化,做出正确决策</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>知识管理</h3>
          <span><p><span style="font-size: small;">知识管理可以对企业内的所有电子文档进行上传、分类管理、查询/借阅,包括个人网盘、公文文件柜和知识中心</span></p></span>
		  <img src="images/17085136g8gd.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对知识管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17085153yh1h.jpg"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>CUSTOMER</span> MANAGEMENT </h3>
          <h2>客户管理<span>精准营销</span></h2>
          <p>有效记录和跟踪客户,管控销售过程,推进签单</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>客户管理</h3>
          <span><p><span style="font-size: small;">客户管理涵盖客户信息记录/提取、销售数据统计分析、商机追踪等功能,配备销售漏斗,为业务提供全程支持。</span></p></span> 
		  <img src="images/170851595vrj.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对客户管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/170852357mmn.png"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>CONTRACT</span> MANAGEMENT </h3>
          <h2>合同管理<span>缜密清晰</span></h2>
          <p>帮你做好合同管理工作的方方面面</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>合同管理</h3>
          <span><p><span style="font-size: small;">合同评审、签订、归档、变更、交付、违约全方位管控,让您的合同管理360度无死角!</span></p></span> 
		  <img src="images/17085243mni6.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对合同管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17085256xhlm.png"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>PERSONNAL</span> FILES </h3>
          <h2>人事信息<span>管理无忧</span></h2>
          <p>人事信息多维度展现,可自定义模板,灵活便捷</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>员工信息档案</h3>
          <span><p><span style="font-size: small;">实现对人员信息档案的记录、查询,可展现组织架构,可进行员工报道激活,也可以生成照片墙,为人力资源管理工作铺好基石。</span></p></span> <img src="images/17085308kw67.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对员工档案不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17091705h84f.png"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>RECRUITING</span> MANAGEMENT </h3>
          <h2>招聘管理<span>高效快速</span></h2>
          <p>人力资源优化配置的助推器</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>招聘管理</h3>
          <span><p><span style="font-size: small;">可记录分析招聘需求、发布招聘计划、简历采集甄选、协助HR面试,规范招聘工作全流程。</span></p></span> 
		  <img src="images/170917105dqs.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对招聘管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17091755q1f1.png"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>SALARY</span> MANAGEMENT </h3>
          <h2>薪酬管理<span>易如反掌</span></h2>
          <p>薪资发放调整都有据可循</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>薪酬管理</h3>
          <span><p><span style="font-size: small;">提供薪资体系/标准设置、薪资计算、薪资发放记录查询、薪资记录调整查询等功能</span></p></span> 
		  <img src="images/17091801zica.png" />
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对薪酬管理不了解?>点击了解</a></div-->
    </div>
  </div>
                <div class="cl" style="display: none">
    <div class="important_l"><a><img src="images/17091816zslw.png"/></a></div>
    <div class="important_r">
       <div class="title_1">
          <h3><span>PERFORMANCE</span> MANAGEMENT </h3>
          <h2>绩效管理<span>轻松实现</span></h2>
          <p>在这里,部门职能差异不是制定考核标准的难点。</p>
       </div>
       <div class="icon_top cl"><i class="i_left"></i><i class="i_right"></i></div>
       <div class="study">
          <h3>绩效管理</h3>
          <span><p><span style="font-size: small;">可按照月度/年度、个人/部门等多个维度进行绩效考核,综合员工业务行为数据进行分析,不仅使团队短板一目了然,还可以为制定考核标准提供依据。</span></p></span> 
		  <img src="images/17091821ne9m.png"/>
       </div>
       <div class="icon_top cl" style="padding-top:0px;"><i class="i_left1"></i><i class="i_right1"></i></div>
       <!--div class="study"><a class="know" href="">对绩效管理不了解?>点击了解</a></div-->
    </div>
  </div>
</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 导航切换 菜单切换 浮动菜单 浮动导航 收缩菜单 收缩导航 右键菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 滚动切换 滚动条切换 滑动选项卡 滑动切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 选项卡自动切换 导航菜单插件 导航插件 菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到