jquery實現tab切換完整程式碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jquery實現tab切換-柯樂義</title> 5 <style type="text/css"> 6 /* CSS Document 全域性*/ 7*{padding:0;margin:0;} 8 html{border:0;width:100%;} 9 body{font-family:Arail,"宋體",verdana;font-size:12px;line-height:1.5em;color:#666; } 10 img{border:none;}input,select{vertical-align:middle; margin-right:2px;} 11 ol,ul,li {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;} 12 ol, ul {list-style:none outside none;} 13 em{font-style:normal;} 14 a{text-decoration:none;color:#666;} 15 a:hover,a:active{text-decoration:underline;color:#41ABCE;} 16 a:visited{color:#666;} 17 h1{font-size:16px;}h2,h3,h4{font-size:13px;}h5,h6{font-size:12px;} 18.left{ float:left;} 19 .right{float:right;} 20 .clear{ clear:both; } 21 .Wrap{margin:0 auto 0;overflow:hidden;width:960px;} 22 /*End 全域性*/ 23 24 25 .seleListCont 26 { 27 clear:both; 28 border-top:1px solid #39B3DA; 29 padding-top:10px; 30 width:200px; 31 } 32 33 .seleList { 34 35 } 36 .seleList li { 37 float:left; 38 line-height:22px; 39 } 40 .seleList li a { 41 line-height:22px; 42 padding:0 10px; 43 } 44 .seleList li.hover { 45 background:none repeat scroll 0 0 #FFFFFF; 46 border-left:1px solid #39B3DA; 47 border-right:1px solid #39B3DA; 48 border-top:1px solid #39B3DA; 49 bottom:-1px; 50 margin-left:5px; 51 position:relative; 52 } 53 </style> 54 </head> 55 56 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 57 <script type="text/javascript"> 58 59 // JavaScript Document 60 /******************************************************************************* 61 * 標題： TAB 選項 62 *******************************************************************************/ 63 64 jQuery(function($) { 65 $("#Move ul li").mouseover(function() { 66 var s = $(this).parent().children().index(this); //尋找父級下子元素第幾個 67 $(this).parent().children().removeClass("hover"); //尋找父級下子元素的hover Css樣式 68 $(this).addClass("hover") 69 $(this).parent().parent().next() 70 .children().hide() 71 .eq(s).show(); //s元素顯示 72 }); 73 74 }) 75 76 </script> 77 78 <body> 79 <div style="width:200px;margin:10px auto;"> 80 <div class="seleList" id="Move"> 81 <ul> 82 <li class="hover"><a href="javascript:void(0);">jQuery</a></li> 83 <li><a href="javascript:void(0);">Javascript</a></li> 84 </ul> 85 </div> 86 <div class="seleListCont"> 87 <ul> 88 <li><a href="http://keleyi.com/a/bjac/etvljevm.htm" target="_blank">jQuery實現固定底部選單</a></li> 89 <li><a href="http://keleyi.com/a/bjac/ec2s9a4n.htm" target="_blank">一個jQuery ajax瀑布流的例子</a></li> 90 <li><a href="http://keleyi.com/keleyi/" target="_blank">keleyi選單外掛首頁</a></li> 91 <li><a href="http://keleyi.com/a/bjac/e7hhwai7.htm" target="_blank">jQ判斷子元素是否包含某標籤</a></li> 92 <li><a href="http://keleyi.com/a/bjac/bfi2kyi5.htm" target="_blank">jQuery各種事件概述</a></li> 93 <li><a href="http://keleyi.com/a/bjac/xbfftiqj.htm" target="_blank">jq獲取下一個元素節點</a></li> 94 <li><a href="http://keleyi.com/a/bjac/fcskag7j.htm" target="_blank">jquery實現a:hover效果</a></li> 95 <li><a href="http://keleyi.com/a/bjac/bqii05en.htm" target="_blank">jQuery拉開關閉帷幕</a></li> 96 <li><a href="http://keleyi.com/a/bjac/c4oc8tyo.htm" target="_blank">彈出選單jQuery外掛</a></li> 97 </ul> 98 <ul style="display: none;"> 99 <li><a href="http://keleyi.com/a/bjac/f8t46jg7.htm" target="_blank">JavaScript閉包解析</a></li><li><a href="http://keleyi.com/a/bjac/n14duxiv.htm" target="_blank">Javascript作用域</a></li><li><a href="http://keleyi.com/a/bjac/tcxhi6x1.htm" target="_blank">深入理解JavaScript的閉包</a></li><li><a href="http://keleyi.com/a/bjac/xpcxjymm.htm" target="_blank">通俗易懂的Javascript閉包介紹</a></li><li><a href="http://keleyi.com/a/bjac/6nha88id.htm" target="_blank">關於javascript閉包的簡單介紹</a></li><li><a href="http://keleyi.com/a/bjac/9a9irmcm.htm" target="_blank">javascript的switch的使用注意</a></li><li><a href="http://keleyi.com/a/bjac/vovf3t3l.htm" target="_blank">瀏覽器視窗大小被改變時觸發的事件</a></li><li><a href="http://keleyi.com/a/bjac/2k683du4.htm" target="_blank">眼珠隨著游標移動JS特效</a></li><li><a href="http://keleyi.com/a/bjac/nmixur5x.htm" target="_blank">確認關閉網頁的js程式碼</a></li><li><a href="http://keleyi.com/a/bjac/4me5brln.htm" target="_blank">Javascript的變數作用域原理詳解</a></li><li><a href="http://keleyi.com/a/bjac/dyloru9f.htm" target="_blank">js獲取螢幕解析度</a></li><li><a href="http://keleyi.com/a/bjac/4esxhwgr.htm" target="_blank">js存、取、刪除cookies例項</a></li> 100 </ul> 101 </div> 102 </div> 103 </body> 104 </html>
相關推薦
jquery實現tab切換完整程式碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="
轉：JQuery實現tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-JQ</title> <style>
JQUERY實現TAB切換
博主是一枚前端小菜鳥，因為挺長時間沒接觸頁面佈局了，居然連tab欄切換都給忘了，後來博主看了一些前端資料還有書，發現網上的很多方法都雜亂無章，看的雲裡霧裡的，冗餘程式碼太多，這讓新手小白會很苦惱，所以博主想自己通過小菜鳥的視角來寫一個用jquery實現的tab欄
用jquery實現Tab切換選單
1.效果圖： 2.html和jq程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</
jQuery帶tab切換搜尋框樣式程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; list-style: none; } .
JavaScript及jQuery實現tab標籤頁切換
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <
jQuery實現TAB選項卡切換特效簡單演示
本文例項為大家分享jQuery實現TAB選項卡切換特效，供大家參考，具體內容如下1、tab切換 on?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
HTML5--javascript程式碼實現Tab切換
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascrip
jquery實現tab頁切換
關聯設定 <h2 class="h2_ch"><span id="tabs" class="l"> <a href="javascript:void(0);" ref="#tab_1" title="基本資訊" clas
原生JS實現tab切換--web前端開發
soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO
怎麽用JavaScript實現tab切換
代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果： 用JavaScript實現思路很簡單，就是先把所有的內容隱藏，點擊標題對應的內容顯示， css代碼如下： <style type="text/css"
jQuery 實現tab標簽實例
python<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
使用jQuery進行tab切換
val 經典 img code foo tdi ML AS bsp HTML： <div class="food"> <div class="tabsdiv"> <ul> <li c
element,點選檢視，實現tab切換：
點選檢視，實現tab切換： 程式碼如下： <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-colum
js實現tab切換功能
一、初始化html結構 <div class="tab" id="tab"> <span class="active">工作日</span> <span>休息日</span> </div> <d
Unity3D實現Tab切換，頁面切換功能
第一篇部落格，僅作為個人在學習過程中記錄作用 正文 之前公司遇到幾個兩個專案都有一個列表切換的功能，具體功能就是點選tab列表，內容根據tab切換來變換，效果如下： 這樣一個很常見功能 網上例子較少，後來學到一個方法，幾步就可以實現，不需要寫程式碼 第一步 建
小程式如何實現tab切換，一部到位
筆者之前嘗試著其他教程：使用swiper來做切換。但是小程式中swiper存在很多限制，比如高度的限制，所以放棄了這種方案，本文將提供另一個方案。 小程式實現tab切換很簡單，只需要完成兩部分。 1
jquery的tab切換
.tab{ display: flex; justify-content: center; } .tab li{ list-style: none; width: 150px; height: 50px;
HTML使用Radio Input來實現Tab切換
在開發中看見僅使用css技巧，就用HTML的Radio Input來實現的Tab的切換，連click事件都未使用。程式碼效果如下： <!DOCTYPE HTML> <html> <header> <link rel="stylesheet" href="
android實現TAB切換附原始碼
電腦上的檔案太多了，能用的不能用的有點亂，備份上傳一下，方便自己以後查詢，其實這裡邊有些東西值得自己深入瞭解一下，工作忙也沒時間寫筆記了，哎，走的太快了 原始碼編譯執行效果如下： 工程是Android Studio的，版本是2.