Jquery UI 选项卡 - 选项卡仅对内容有效

发布于 2024-11-16 01:31:20 字数 730 浏览 2 评论 0原文

非常感谢任何帮助，

我试图仅当 div 中存在内容时才使选项卡处于活动状态（“可点击”）。内容将来自 php sql 查询。

在最简单的形式中，

<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 知之甚少，所以如果有一个解决方案，您是否可以在与一个小孩交谈时解释它......

提前非常感谢，我希望我的问题足够清楚。

原文

any help gratefully received

I am trying to get a tab to be active ("clickable") only if there is content present within the div. The content will come from a php sql query.

In it's simplest form

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

I guess the active/inactive part does not have to be based on the query result - number of characters in the div or size of div may both be indicators I could use to see if the div is empty.

I know very little about javascript so if there is a solution out there is it possible you could explain it as you were speaking to a small child...

Many thanks in advance and I hope my question is clear enough.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

层林尽染 2024-11-23 01:31:20

您可以使用 select 拦截选项卡更改事件，如下所示：

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

You can intercept the tab change event using select, something like:

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

回复收藏 0 原文

~没有更多了~