jQuery tab圖標選項卡切換代碼



67 267 90



特效描述:jQuery tab圖標選項卡切換,jQuery tab圖標選項卡切換代碼

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<header>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 選項卡自動切換 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子