Question

我有一个简单的三页菜单，用于信息网站。我使用无序列表来制作菜单，但我无法根据点击的li来更改正确页面容器的不透明度。

HTML

<div id="nav_container">
    <ul>
        <li class="nav_services"><i></i>SERVICES</li>
        <li class="nav_home nav_active"><i></i>HOME</li>
        <li class="nav_contact"><i></i>CONTACT</li>
    </ul>
</div>

更新：这些是我尝试交替显示的内容。

<div id="services_container"></div>
<div id="home_container"></div>
<div id="home_container"></div>

CSS

    .nav_services:active:not(.nav_active) #services {
        opacity: 1;
    }

    .nav_services:active:not(.nav_active) #home_container, #contact_container {
        opacity: 0;
    }


    .nav_home:active:not(.nav_active) #home_container {
        opacity: 1;
    }

    .nav_home:active:not(.nav_active) #services_container, #contact_container {
        opacity: 0;
    }


    .nav_contact:active:not(.nav_active) #contact {
        opacity: 1;
    }

    .nav_contact:active:not(.nav_active) #services, #home {
        opacity: 0;
    }

老实说，我很确定这就是我调用CSS的方式，但我不知道如何正确编写它。

Answer 1

只是使用jQuery来解决我的问题。简单的功能就可以了。

我更喜欢CSS，但是。这将暂时做到。

function page_handler() {
$('.nav_services').click(function () {
    if ($('.nav_services:not(.nav_active)')) {
        $('#services_container').css({
            opacity: 1
        });
        $('#home_container, #contact_container').css({
            opacity: 0
        });
    }
});
$('.nav_home').click(function () {
    if ($('.nav_home:not(.nav_active)')) {
        $('#home_container').css({
            opacity: 1
        });
        $('#services_container, #contact_container').css({
            opacity: 0
        });
    }
});
$('.nav_contact').click(function () {
    if ($('.nav_contact:not(.nav_active)')) {
        $('#contact_container').css({
            opacity: 1
        });
        $('#services_container, #home_container').css({
            opacity: 0
        });
    }
});
}

仅CSS菜单系统

1 个答案: