使用Jquery-ui选项卡中的按钮进行导航

Question

我正在尝试添加一个普通的Asp.Net按钮或超文本标记语言的按钮内每个标签，并试图使用该按钮导航，但我无法navigate.If我使用超链接，然后我能够通过每个标签导航。

这就是我现在要吃的！

http://jsfiddle.net/RaaDV/

下面是我的代码：

     <script>
      $(document).ready(function() {
        $("#tabs").tabs();
      });
      </script>


    <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><a href="#fragment-3"><span>Three</span></a></li>
        </ul>

        <div id="fragment-1">
            <p>First tab is active by default:</p>

        <a href="nexttab">Next Tab</a>

        </div>

        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 


        </div>

        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
        </div>
    </div>

Answer 1

您的代码只需使用button替换您的a链接：

http://jsfiddle.net/RaaDV/126/

Answer 2

我已经从Guillaume派生了这个示例，并创建了一个新的：

http://jsfiddle.net/NSX3d/3/

HTML：

<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><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p> <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a>
 <a class="prevtab" href="#">Previous Tab</a>

    </div>
</div>

JS：

    $("#tabs").tabs();
//New version this line is $('#tabs >ul >li').size();
var tabCount = $("#tabs").tabs("length");




$("#tabs > ul > li > a").each(function (index) {

    if (index == 0) {
        $($(this).attr('href') + " .prevtab").hide();
    }


    if (index >= tabCount - 1) {
        $($(this).attr('href') + " .nexttab").hide();
    }

});



$(".nexttab").click(function () {
    //new version - active
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);



});


$(".prevtab").click(function () {
    //new version - active
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected - 1);



});

它有“下一步”和“上一步”按钮。