定製jquery選項卡

我想定製jQuery的默認選項卡。我在導航欄中添加了添加標籤頁按鈕。定製jquery選項卡

我想在該按鈕之前添加更新的選項卡：我該如何做到這一點？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><input type='button' id='addTab' value='Add Tab'></li> 
    </ul> 

    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

    <input type='button' id='removeTab' value='RemoveTab'> 
</body> 
</html>

JS：

$('#addTab').live('click', function() { 
    $("#tabs").tabs("add", "http://google.com", "A newTab", [2]) 
}); 
$('#removeTab').live('click', function() { 
    $("#tabs").tabs("remove", "http://google.com", "A newTab", [2]) 
});

的jsfiddle：http://jsfiddle.net/6VrwD/14/

來源

2012-05-09 Muhammad Usman

什麼不工作？在小提琴頁面中，我可以看到添加新標籤的按鈕工作得很好。 – arma

我想追加按鈕之前的標籤... –

http://jsfiddle.net/armababy/6VrwD/17/ – arma

我有同樣的問題。我發現有一些棘手的方法來避免它。我不確定它適用於任何瀏覽器環境，但請按照下面的方式如果您喜歡：

首先，給最後一個<li>標籤添加一個類名稱，在其中放置「添加標籤」按鈕。

<ul id="mytabs"> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li class='list_btn'><input type='button' id='addTab' value='Add Tab'></li> 
</ul>

接下來，在點擊功能中，只需在最後一個位置添加一個製表符。將新標籤添加到最後位置後，您可以切換最後一個標籤和「添加標籤」按鈕的順序。

$('#addTab').live('click', function() { 
    // add a tab to the last position. 
    $("#tabs").tabs("add", "http://google.com", "A newTab"); 

    // switch the order of the last tab and the "Add Tab" button. 
    $(".list_btn").clone().appendTo("#mytabs"); 
    $(".list_btn:first").remove(); 
});

您將能夠更復雜地重寫代碼，尤其是在切換標籤順序的最後部分。謝謝。

來源

2012-05-09 11:12:11 naota

定製jquery選項卡

回答

相關問題