Использование кнопки внутри Jquery-UI TABS для навигации - PullRequest
Новая
       43

Использование кнопки внутри Jquery-UI TABS для навигации

0 голосов
/ 03 ноября 2011

Я пытаюсь добавить обычную кнопку Asp.Net или кнопку HTML внутри каждой вкладки и пытаюсь перемещаться с помощью этой кнопки, и я не могу перемещаться. Если я использую гиперссылку, тогда я могу перемещаться по каждой вкладке.

Вот что у меня сейчас!

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>

Ответы [ 2 ]

2 голосов
/ 03 ноября 2011

Ваш код работает с простой заменой ссылки a на button:

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

1 голос
/ 13 июня 2013

Я раздвоил этот образец у Гийома и создал новый:

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



});

Имеет кнопки «Следующая» и «Предыдущая»

...