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

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

html css

Html 突出显示导航中的活动选项卡,html,css,Html,Css,下面我用css设计了菜单，但我没有发现，当我进入房间页面或fnb页面或任何其他页面时，我希望该页面的菜单以简单的文字突出显示。我尝试了很多组合，但都没有成功有人能帮我把它弄好吗这里是我的菜单级联样式表的链接以下是一个示例：您的fiddle中的代码有许多错误，请删除url名称和id中“之间的空格。粘贴在这里的代码中的html标记：有很多不同的方法来实现这一点，但在您所拥有的情况下：当您拥有大量html页面，并且每个导航元素都有自己的页面时。您可以创建如下样式：

下面我用css设计了菜单，但我没有发现，当我进入房间页面或fnb页面或任何其他页面时，我希望该页面的菜单以简单的文字突出显示。我尝试了很多组合，但都没有成功

有人能帮我把它弄好吗

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

以下是一个示例：

您的fiddle中的代码有许多错误，请删除url名称和id中

“

之间的空格。粘贴在这里的代码中的html标记：

有很多不同的方法来实现这一点，但在您所拥有的情况下：当您拥有大量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>















在这种情况下，上面的样式将仅适用于此元素
现在它突出显示文本，我希望保持文本原样并突出显示选项卡的背景，例如，当我添加它时，它会显示一个很好的突出显示。示例当它非常感谢Sergio时的情况，无论如何，这是一种突出显示的方式。。感激-我仍然使用中的类，但效果是您想要的。这就是你想要的效果吗？当我们在菜单上移动光标时，效果就出现了，这就是我在页面处于活动状态时想要的效果。。
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;
}

<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>