jquery大氣的圖標菜單tab選項卡切換效果代碼



160 637 213



特效描述: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

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

老夫子电子