Question

我有动态生成的HTML，结构基本上就是这样......

<ul>
    <li>Class #1
        <ul>
            <li>Joe</li>
            <li>Fred</li>
        </ul>
    </li>
    <li>Class #2
        <ul>
            <li>Sally</li>
            <li>Bob</li>
            <li>Eve</li>
        </ul>
    </li>
</ul>

我想创建一个界面，其中Class＃1和Class＃2是显示其嵌套<ul>学生的标签。

Answer 1

使用jQuery UI进行选项卡。见这里：

https://jqueryui.com/tabs/

Answer 2

您应该为每个列表项添加onclick操作（带有类号）。该操作应该改变以下项目的css样式：

display:block;

为：

display:inherit

反之亦然。

让我们清楚一点。你必须自己做一些工作，我们不是你自己的私人猴子;）

Answer 3

这是使用jQuery的一个非常基本的实现：

HTML代码：

<ul>
    <li class="tabs">List1
        <ul class="tabContent"><li>...</li></ul>
    </li>
    <li class="tabs">List2
        ...
    </li>
</ul>

jQuery代码：

$('ul li.tabs:first-child ul.tabContent').show();

$('li.tabs').click(function(){
    $(this).find('ul.tabContent').show();
    $(this).siblings().find('ul.tabContent').hide();
});

CSS代码：

ul li.tabs{ 
    display: inline-block; 
    cursor: pointer;
}
ul.tabConten{ 
    display:none;
}

希望这有帮助。

如何使用嵌套<ul>创建选项卡组？</ul>

3 个答案: