开发者

Easiest way to class "current page" nav element?

开发者 https://www.devze.com 2023-01-02 18:47 出处:网络
I have a navigation bar on my webpage with links to different pages.Is there an easy way to automatically set the class on the navigation element corresponding to the current page?For instance, 开发者

I have a navigation bar on my webpage with links to different pages. Is there an easy way to automatically set the class on the navigation element corresponding to the current page? For instance, 开发者_运维问答I want the "About Us" tab on the bar to have a different style if you're currently viewing the "About Us" page. I know I could rig up some PHP for each page, but I'd rather have a more general set-it-and-forget-it solution.


i've used this before and it works well.

http://www.cssnewbie.com/intelligent-navigation/


If you want a pure HTML/CSS solution, the best I can think of is to put a class on the body describing which tab should be highlighted, and an id on each tab, then target the tabs from there via CSS.

So for the HTML, the "About Us" page would have something like <body class="AboutUs"> while the "Home" page would have a similar <body class="Home">. The tabs would each have unique ids like "aboutUs" and "home".

Then in the CSS, you could style it like so:


body.AboutUs tabs#aboutUs,
body.Home tabs#home
{
    /* selection style goes here */
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号