Question

下面我正在使用css设计的菜单，我无法找到的是当我进入房间页面或fnb页面或任何其他页面时，我希望该页面的菜单以简单的单词突出显示。我已经尝试了很多组合来实现这一目标，但却无法成功。

任何人都可以帮我把它弄好吗？

这是菜单级联样式表的链接。

    <nav class="clearfix">
        <ul id="left" class="fancyNav">
            <li id="fnb"><a href="fnb.html">Eat &amp; Drink</a></li>
            <li id="rooms"><a href="rooms.html>Rooms</a></li>
            <li id="activities"><a href="activity.html">Activities</a></li>
            <li id="spa"><a href="spa.html">Spa</a></li>
        </ul>
            <div id="logo">
                <a href="home.html"><img src="fnb/assets/img/home.png" alt="logo" /></a>
            </div>
        <ul id="right" class="fancyNav">
            <li id="booking"><a href="booking.html">Booking</a></li>
            <li id="home"><a href="home.html">Home</a></li>
            <li id="boats"><a href="boats.html">Boats</a></li>
            <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>

    </nav>

Answer 1

以下是一个示例：jsfiddle.net/Q4Ckm/9/。

您在小提琴中的代码有很多错误，请删除网址名称和ID中""之间的空格。您在此处粘贴的代码中的html代码：<a href="rooms...未关闭，您错过了"。

在页面的菜单项中，您可以像在jsfiddle上一样添加class="active"。这必须在每个菜单项的每个页面中完成。

如果您想要相同的渐变效果，请将其添加到新类：

.active {
background-color: -webkit-gradient(linear, left top, left bottom, from(#fefefe), color-stop(0.5, #f0f0f0), color-stop(0.51, #e6e6e6));
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168, 168, 168, 0.5)), color-stop(0.5, rgba(168, 168, 168, 0)), to(rgba(168, 168, 168, 0.5)));
background-image:-moz-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:-o-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:-ms-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
}

如果您遇到问题，请告诉我。

Answer 2

有很多不同的方法可以实现这一点，但是在你喜欢的情况下：当你拥有一堆html页面时，每个导航元素都有自己的页面。您可以创建如下样式：

body.fnb #fnb, body.rooms #rooms, body.activities #activities, body.spa #spa
 /* ... include all other navigation/pages in the same way */ {
   /* Add special css style for active items */
   color: white;
}

在html页面上，你可以包含body元素的类，如：

<body class="fnb">
   <nav class="clearfix">
        <ul id="left" class="fancyNav">
            <li id="fnb"><a href="fnb.html">Eat &amp; Drink</a></li>
            <li id="rooms"><a href="rooms.html>Rooms</a></li>
            <li id="activities"><a href="activity.html">Activities</a></li>
            <li id="spa"><a href="spa.html">Spa</a></li>
        </ul>
            <div id="logo">
                <a href="home.html"><img src="fnb/assets/img/home.png" alt="logo" /></a>
            </div>
        <ul id="right" class="fancyNav">
            <li id="booking"><a href="booking.html">Booking</a></li>
            <li id="home"><a href="home.html">Home</a></li>
            <li id="boats"><a href="boats.html">Boats</a></li>
            <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>

    </nav>
</body>

在这种情况下，上面的样式仅适用于此元素<li id="rooms"><a href="rooms.html>Rooms</a></li>。

突出显示导航中的活动选项卡

2 个答案: