Question

我试图在每个标签内添加一个普通的Asp.Net按钮或HTML按钮，并尝试使用该按钮进行导航，我无法导航。如果我使用超链接，那么我可以浏览每个标签。

这就是我现在拥有的东西！

这是我的代码：

     <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

您的代码只需将a链接替换为button：

即可

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



});

它有下一个和上一个按钮

使用Jquery-ui TABS中的按钮进行导航

2 个答案: