Question

我想自定义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/

Answer 1

我遇到了同样的问题。我发现有点难以避免它。我不确定它是否适用于所有浏览器环境，但如果您喜欢，请尝试以下方式：

首先，为您放置“添加标签”按钮的最后一个<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();
});

您将能够以更复杂的方式重写代码，尤其是在切换选项卡顺序的最后部分。谢谢。

自定义jquery选项卡

1 个答案: