仅 CSS 菜单系统答案

【问题标题】：CSS Only Menu System仅 CSS 菜单系统
【发布时间】：2015-04-03 08:03:10
【问题描述】：

我有一个简单的三页信息网站菜单。我使用无序列表来制作菜单，但我无法让它根据单击的 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。

<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 的方式，但我不知道如何正确编写它。

【问题讨论】：

请添加有关所需结果的更多详细信息。 页面容器是指LI吗？
不，我的意思是页面的单独容器。我会更新我的代码。

标签： jquery css menu

【解决方案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
        });
    }
});
}

【讨论】：