использовать JQuery, чтобы обновить вкладку div на клик? - PullRequest
Новая
       19

использовать JQuery, чтобы обновить вкладку div на клик?

1 голос
/ 24 мая 2010

Я использую вкладки, но интересно, можно ли "обновить" содержимое вкладок по клику?

Ответы [ 4 ]

4 голосов
/ 25 мая 2010

вот как я это делаю с ajax в asp.net mvc: 

<div id="content">
    <ul>
        <li><a href="#tab0"><span>Details</span></a></li>
        <li><a href="#tab1"><span>Cost</span></a></li>
        <li><a href="#tab2"><span>Bookings</span></a></li>
    </ul>
    <div id="tab0"></div>
    <div id="tab1"></div>
    <div id="tab2"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            var $tabs = $("#content").tabs({
                select: function(e, ui) {
                    var thistab = ui;
                    runMethod(thistab.index);
                }
            });
        });
    });

    function runMethod(tabindex) {
        switch (tabindex) {
            case 0:
                getTabZeroData();
                break;

            case 1:
                getTabOneData();
                break;

            case 2:
                getTabTwoData();
                break;
        }
    }
</script>

<script type="text/javascript">
// ajax getTabnnn methods here...
</script>

каждый из методов getTabnnnData запускает свою собственную небольшую подпрограмму ajax, и div заполняется. Это довольно эффективно, так как вы также можете стать немного умнее и запускать метод, только если целевой div еще пуст и т. Д.

надежда, которая дает еще один уклон на вещи.

джим

0 голосов
/ 15 декабря 2014

Пожалуйста, поймите, что это, вероятно, не лучший способ сделать это.Но это то, что он просил. 

function tabrefresh(){
    $( "#tabs" ).tabs( "refresh" );
};

<button onclick="tabrefresh()">Refresh Tabs</button>
0 голосов
/ 25 мая 2010

Простой: http://docs.jquery.com/UI/Tabs

;)

0 голосов
/ 24 мая 2010

Да, это возможно, но вам не нужно событие onClick для этого, я думаю

используйте это 

<div id="example">
     <ul>
         <li><a href="ajaxpage1.php"><span>Content 1</span></a></li>
         <li><a href="ajaxpage2.php"><span>Content 2</span></a></li>
         <li><a href="ajaxpage3.php"><span>Content 3</span></a></li>
     </ul>
</div>

Обратите внимание: вместо указания идентификатора разделения вкладки, ссылка на страницу, указанная , поэтому каждый раз, когда вы нажимаете на вкладки, она обновляет ее

, это изящно ухудшается - ссылки, например содержимое, будут по-прежнему доступны с отключенным JavaScript.

ps: я предполагаю, что у вас есть рабочие вкладки

...