基于jquery庫的tab新形式使用
更新時間：2012年11月16日 11:13:31 作者：
本文將介紹基于jquery庫的tab新形式使用,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<html>
<title>
</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul.menu li:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});
$("ul.menu li").click(function(){
var c = $("ul.menu li");
var index = c.index(this);
var p = idNumber("No");
show(c,index,p);
});
function show(controlMenu,num,prefix){
var content= prefix + num;
$('#'+content).siblings().hide();
$('#'+content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};
function idNumber(prefix){
var idNum = prefix;
return idNum;
};
});
</script>
<style type="text/css">
* {margin:0; padding:0}
ul,li {
list-style:none
}
.box {
border:1px solid #ccc;
margin:10px;
}
.tagMenu {
height: 24px;
position:relative;
border-bottom:1px solid #999
}
.tagMenu ul {
position:absolute;
bottom:-1px;
height:26px;
}
ul.menu li {
float:left;
border-left:1px solid #999;
padding:0 12px;
cursor:pointer
}
ul.menu li.current {
border:1px solid #999;
border-bottom:none;
background:#fff;
height:25px;
line-height:26px;
margin:0
}
.content { padding:10px}
</style>
<body>
<div class="box">
<div class="tagMenu">
<ul class="menu">
<li>Label 1.1</li>
<li>Label 1.2</li>
<li>Label 1.3</li>
<li>Label 1.4</li>
</ul>
</div>
<div class="content">
<div class="layout">infomation 1.1</div>
<div class="layout">infomation 1.2</div>
<div class="layout">infomation 1.3</div>
<div class="layout">infomation 1.4</div>
</div>
</div>
</body>
</html>
相關(guān)文章
jquery實現(xiàn)智能感知連接外網(wǎng)搜索
注意引用的插件及順序;搜索獲取選擇的值,智能感知連接外網(wǎng)搜索，具體實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對你大家有所幫助2013-05-05
在項目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗證圖片的格式與大小，那么如何來操作呢，今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。2014-12-12
實例詳解jQuery結(jié)合GridView控件的使用方法
這篇文章主要以實例的方式詳細(xì)介紹了jQuery結(jié)合GridView控件的使用方法，感興趣的小伙伴們可以參考一下2016-01-01
firefox瀏覽器用jquery.uploadify插件上傳時報HTTP 302錯誤
這篇文章主要介紹了firefox瀏覽器用jquery.uploadify插件上傳時報HTTP 302錯誤,分析了下，原來是利用flash進(jìn)行post上傳時沒有包含原來的session信息，而是重新創(chuàng)建了一個session，知道原因了，我們來看看如何解決吧。2015-03-03
使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)
相信大家對QQ中的Ctrl+Enter快捷回復(fù)和微博上的@指名回復(fù)功能都不陌生,在WordPress的評論欄方面我們同樣可以添加這樣的功能,一起來看使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)的方法:2016-05-05
需要在列表中顯示很多圖片，圖片高低不同，寬度都設(shè)置一樣了，要底部對齊2011-11-11
這篇文章主要介紹了jQuery點縮略圖彈出層顯示大圖片的方法，思路非常不錯，這里推薦給大家。2015-02-02
jQuery實現(xiàn)判斷滾動條滾動到document底部的方法分析
這篇文章主要介紹了jQuery實現(xiàn)判斷滾動條滾動到document底部的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)及針對頁面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這個代碼，針對學(xué)習(xí)jquery插件制作的朋友可以參考下。效果并不是主要的。2010-05-05
JQUERY 瀏覽器判斷實現(xiàn)函數(shù)，如果只是為了判斷瀏覽器不建議用，如果你已經(jīng)用了jquery才用啊，要不沒必要因為這個小功能，加個那么大的類庫吧。2009-08-08