Question

在我的主导航栏中有一个名为category & item的菜单，它有两个子菜单，分别名称为category和item。我只有一个页面来显示这两个部分。

我的页面是category_item.php，它有两个不同的标签来显示每个部分。在这种情况下，它是category和item。

所以我的问题是，点击子菜单上的category和item链接时，我需要打开category和item标签。

更新 -

这是主导航栏中的代码

<li class="current">
    <a>Category & Item</a>
        <div class="menu-container">
            <div class="menu-link">
                <a href="">Category</a>
            </div>
            <div class="menu-link current">
                <a href="">Item</a>
            </div>
        </div>
</li>

这是来自category_item.php页面

<div class="ui-widget-header ui-corner-top">
    <ul>
        <li><a href="#tabs-1">My Category</a></li>
        <li><a href="#tabs-2">My Items</a></li>
    </ul>
</div>

<div id="tabs-1" class="tabs3">
    my stuff...
</div>

<div id="tabs-21" class="tabs3">
    my stuff...
</div>

我能知道是否可以这样做？

谢谢。

Answer 1

您可以使用Javascript执行此操作。只需将该类的属性display从none切换为block，反之亦然。如果您使用的是jQuery，则可以执行以下操作：

$(document).ready(function() {
    $('#cat_link').click(function() {
        $('#tabs-1').hide();
        $('#tabs-2').show();
        return false;
    });
    $('#item_link').click(function() {
        $('#tabs-2').hide();
        $('#tabs-1').show();
        return false;
    });
});

您还有jQuery-UI widget tabs。

如果您使用纯JavaScript，可以这样做（reference）：

function hideshow(which){
    if (!document.getElementById)
        return
    if (which.style.visibility=="visible")
        which.style.display="hidden"
    else
        which.style.display="visible"
}

选项卡根据子菜单上的链接打开

1 个答案: