<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »jQuery選項卡js選項卡

        jQuery選項卡js選項卡

        至成科技 2014-07-24 訪問量(1904) 評論(0)
        摘要:jQuery選項卡,js選項卡


        jQuery內容:

        <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
        <script type="text/javascript">
        
        $(document).ready(function() {	
          
          $('#tabMenu li').click(function(){    
           
            if (!$(this).hasClass('selected')) {               
        	   
        	    $('#tabMenu li').removeClass('selected');	    
        	   
        	    $(this).addClass('selected');	    
        	    
        	    $('.boxBody div.parent').slideUp('1500');	    
        	   
        	    $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
        	    
        	 }
            
          }).mouseover(function() {
          
            $(this).addClass('mouseover');
            $(this).removeClass('mouseout');   
            
          }).mouseout(function() {    
           
            $(this).addClass('mouseout');
            $(this).removeClass('mouseover');    
            
          });
        	
          $('.boxBody #category li').click(function(){
           
            window.location = $(this).children().attr('href');
          }).mouseover(function() {
           
            $(this).css('backgroundColor','#888');
            $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
          }).mouseout(function() {    
            
            $(this).css('backgroundColor','');
            $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
          });  	
        	
          $('#.boxBody li').click(function(){
            window.location = $(this).children().attr('href');
          }).mouseover(function() {
            $(this).css('backgroundColor','#888');
          }).mouseout(function() {
            $(this).css('backgroundColor','');
          });  	
        	
        });
        
        </script>
        CSS樣式內容
        <style>
        body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
        a {color:#ccc;text-decoration:none;}
        a:hover {color:#ccc;text-decoration:none}
        
        #tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
        #tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
        
        li.comments {background:url(images/tabComment.png) no-repeat 0 -32px;}
        li.posts {background:url(images/tabStar.png) no-repeat 0 -32px;}
        li.category {background:url(images/tabFolder.png) no-repeat 0 -32px;}
        li.famous {background:url(images/tabHeart.png) no-repeat 0 -32px;}
        li.random {background:url(images/tabRandom.png) no-repeat 0 -32px;}
        
        li.mouseover {background-position:0 0;}
        li.mouseout {background-position:0 -32px;}
        li.selected {background-position:0 0;}
        
        .box {width:227px}
        .boxTop {background:url(images/boxTop.png) no-repeat;height:11px;clear:both}
        .boxBody {background-color:#282828;}
        .boxBottom {background:url(images/boxBottom.png) no-repeat;height:11px;}
        
        .boxBody div.parent {display:none;}
        .boxBody div.show {display:block;}
        
        .boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
        .boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
        .boxBody div ul li.last {border-bottom:none}
        .boxBody div li span {font-size:8px;font-style:italic; color:#888;}
        </style>

        HTML內容
        <div class="box">
        <ul id="tabMenu">
          <li class="posts selected"></li>
          <li class="comments"></li>
          <li class="category"></li>
          <li class="famous"></li>
          <li class="random"></li>
        </ul>
        <div class="boxTop"></div>
        
        <div class="boxBody">
          
          <div id="posts" class="show parent">
            <ul>
              <li><a href="http://www.vxdmg.com/403.html">網站建設 HTML5 常用的幾個標簽</a></li>
              <li><a href="http://www.vxdmg.com/91.html">網頁設計5個原則</a></li>
              <li><a href="http://www.vxdmg.com/409.html">thinkphp更新教程</a></li>
              <li><a href="http://www.vxdmg.com/410.html">西安很工作室和網站建設公司都在用thinkphp3.2.2</a></li>
              <li><a href="http://www.vxdmg.com/405.html">西安網站建設中的 css3 動畫</a></li>
              <li class="last">至成科技-孫鑫</li>
            </ul>  
          </div>  
          
          <div id="comments" class="parent">
            <ul>
             <li><a href="http://www.vxdmg.com/408.html">怎么修改網站背景色-至成科技網站建設小知識</a></li>
              <li><a href="http://www.vxdmg.com/407.html">西安網站建設教您網站seo</a></li>
              <li><a href="http://www.vxdmg.com/382.html">好的網站才能吸引住客戶的眼球</a></li>
              <li><a href="http://www.vxdmg.com/398.html">至成科技高端定制響應式網站建設</a></li>
              <li><a href="http://www.vxdmg.com/400.html">服務器備案,主機備案,vps備案,虛擬主機備案</a></li>
              <li class="last">至成科技-孫鑫</li>
            </ul>
          </div>
          
          <div id="category" class="parent">
            <ul>
              <li><a >ajax</a></li>
              <li><a >css-html</a></li>
              <li><a >freebies</a></li>
              <li><a >icon</a></li>
              <li><a >inspiration</a></li>
              <li><a >javascript</a></li>
              <li><a >logo</a></li>
              <li><a >photography</a></li>
              <li><a >photoshop</a></li>
              <li><a >php</a></li>
              <li><a >seo</a></li>
              <li><a >tutorial</a></li>
              <li><a >usability</a></li>
              <li><a >wallpaper</a></li>
              <li class="last"><a >wordpress</a></li>
            </ul>  
          </div>
          
          <div id="famous" class="parent">
            <ul>
              <li>簡單的jQuery模態窗口教程</li>
              <li>創建一個簡單的CSS + Javascript jQuery工具提示</li>
              <li>導航列表菜單+ Jquery動畫效果教程</li>
              <li class="last">至成科技-孫鑫</li>
            </ul>  
          </div>
          
          <div id="random" class="parent">
            <ul>
              <li>50個單色網站設計</li>
              <li>案例:網頁設計中的面包屑和較佳實踐</li>
              <li>簡單的JQuery模態窗口教程</li>
              <li>導航列表菜單+ Jquery動畫效果教程</li>
              <li>創建一個簡單的CSS + Javascript jQuery工具提示</li>
            </ul>    
          </div>        
        
        </div>
        
        <div class="boxBottom"></div>
        
        </div>
        源程序下載:/Uploads/file/20140619/20140619102937_26626.rar

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划