jquery實現基礎的帶關閉的索引標籤

2019-12-12 03:56:58

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1

第一步：實現思路。1、需要引入jquery方便獲取dom元素和操作dom元素。2、首先建立一個頁面，編寫需要的樣式和html元素和js3、實現新增一個tab，主要是拼接HTML元素，當點選新增按鈕時，將元素新增到存放tab的div中。4、實現點選tab顯示其對應的div中的內容。給tab新增單擊事件，根據tab的序號借助jquery查詢元素，並設定顯示隱藏。5、刪除tab的實現。主要是藉助於jquery查詢元素和顯示隱藏函數。通過隱藏實現刪除的功能，也可以使用jquery的移除函數remove()移除元素。

2

第二步：程式碼實現。

具體程式碼如下所示：

主要分為三部分：

1、style主要是樣式的設定

2、body中的HTML主體

3、js動態操作HTML的程式碼

<!DOCTYPE html>

<html>

<head>

<title>可關閉的tab標籤</title>

<style>

margin: 0;

padding: 0;

}

ul{

list-style:none;

}

text-decoration: none;

}

.nav{

line-height: 40px;

border-bottom: 1px solid #333333;

}

.sum{

display: none;

}

.list{

font-size: 14px;

line-height: 40px;

border-bottom: 1px solid #333333;

}

#tab{

position:relative;

height:50px;

background: beige;

}

#content{

position: relative;

}

.item{

display: none;

width: 100%;

height: 600px;

background-color: burlywood;

}

.tab-nav{

display: inline-block;

line-height:40px;

padding:0 10px

}

</style>

</head>

<body>

<button onclick="addTab()">新增一個tab</button>

</div>

</div><div class="tab-nav" num="3">

</div>

</div><div class="tab-nav" num="5">

</div>

</div>

</div>

var num = 6;

function addTab(){

num = num+1;

var str = '<div class="tab-nav" num="'+num+'">'

+'<a href="javascript:;" onclick="showDiv('+num+')">新增'+num+'</a>'

+'<span style="padding-left: 10px" onclick="hideDiv(this,'+num+')">X</span></div>'

$("#tab").append(str);

var content = '<div class="item">內容'+num+'</div>';

$("#content").append(content);

}

function showDiv(number){

$('.item').hide();

$('.item').eq(number).show()

}

function hideDiv(obj,number){

var num=$(obj).parent().attr("num");

var num0=$(obj).parent().prev().attr("num");

var num1=$(obj).parent().next().attr("num");

$(obj).parent().remove();

if($('.item').eq(num).is(":visible")){

$('.item').hide();

if(num1){

$('.item').eq(num1).show()

}

else if(num0){

$('.item').eq(num0).show()

}

else{

$('.item').eq(0).show()

}

</script>

</body>

</html>

3

第三步：測試tab標籤。

1、開啟頁面檢視頁面效果，預設存在6個tab頁籤。如圖1所示

2、測試新增tab功能。點選新增按鈕，新增tab7，測試成功。如圖2所示

3、測試單擊tab標籤顯示對應的內容。具體操作如圖3,4,5

4、測試刪除功能。如圖

jquery實現基礎的帶關閉的索引標籤

1

2

3

熱門文章