带有html的Navigator不起作用javascript

Navigator with html doesn't work javascript

本文关键字：不起作用 javascript Navigator html 带有      更新时间：2023-09-26

我有这段代码，当我按下带有元素的链接时，我想隐藏带有类名选项卡的 ul 并显示带有类 tab-1 的 ul，而不隐藏两个 ul 元素。我尝试过使用jquery，但没有成功。jQuery 代码如下。 $("a").click(function() { $(".tab").hide("slide", {direction: "left"}, "slow"); $(".tab-1").show("slide", {direction: "left"}, "slow"); }); 我该怎么做？

<ul class="tab">
    <li>
        <a href="#">Link 1</a>
        <ul class="tab-1">
            <li>List 1</li>
            <li>List 2</li>
        </ul>
    </li>
</ul>

不能显示设置为 display:none 的元素的子元素。如果未显示父级...父级内部的任何东西都不能

但是，您可以在父项上设置visibility:hidden，在后代上设置visibility:visible

.tab   {visibility:hidden}
.tab-1 {visibility:visible}

请注意，这是非常罕见的做法。更好地描述您想要实现的目标会有所帮助

演示

只需隐藏与.tab > li > a匹配的所有元素即可。

演示：

.tab, .tab ul {
    list-style-type: none;
}
.tab > li > a {
    display : none;
}
<ul class="tab">
    <li>
        <a href="#">Link 1</a>
        <ul class="tab-1">
            <li>List 1</li>
            <li>List 2</li>
        </ul>
    </li>
</ul>

相关文章：