Jquery UI Tabs - вкладка активна только с контентом

Question

любая помощь с благодарностью получена

Я пытаюсь заставить вкладку быть активной («кликабельной»), только если внутри div есть контент. Контент будет поступать из PHP-запроса.

В простейшем виде

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

<div id="tabs">
<ul>
<li><a href="#tabs-1">Hello</a></li>
<li><a href="#tabs-2">Goodbye</a></li>
</ul>

<div id="tabs-1">
if Query returned result, echo results, tabs-1 active
</div>

<div id="tabs-2">
if Query returned 0 results, nothing to echo tabs-2 inactive
</div>
</div>

Я полагаю, что активная / неактивная часть не обязательно должна основываться на результате запроса - количество символов в div или размер div могут быть индикаторами, которые я мог бы использовать, чтобы увидеть, является ли div пустым.

Я очень мало знаю о javascript, поэтому, если есть решение, есть вероятность, что вы могли бы объяснить это, когда разговаривали с маленьким ребенком ...

Большое спасибо заранее, и я надеюсь, что мой вопрос достаточно ясен.

Answer 1

Вы можете перехватить событие изменения вкладки, используя select, что-то вроде:

$("#tabs").tabs({
    select: function(event, ui) {
        if ($(ui.panel).html().length < 1) {
            alert('no content!');
            return false;
        }
    }
});