0

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

4

1 回答 1

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();
});

You will be able to rewrite the code more sophisticated way, especially at the last part where switching the order of the tabs. Thank you.

于 2012-05-09T11:12:11.437 回答