开发者

Css Html JavaScript - Navigation Highlight current selected Menu

开发者 https://www.devze.com 2022-12-13 02:15 出处:网络
i think this question is very easy but I don\'t know if i am right. I am an oldschoool html, php coder.

i think this question is very easy but I don't know if i am right. I am an oldschoool html, php coder. I want to use this kind of navigation: http://www.cssportal.com/horizontal-menus/13styles.htm

So far no problem. I got an dynamic php page and i want to use开发者_如何转开发 this Menu. There is no problem without this line in the HTML Part:

  <li><a href="" title="" class="current"><span>LINK</span></a></li>

The Problem is the class. What is the smartest way to detect which link is now current? I would do it in this way. I would write a php script like this pseudo code:

if acutaldocument == "link1.html" then echo "class='current' ";

But i think this is not the smartest way. Or am I right? Thanks


There's many options...

You can use session cookies, JavaScript, you can pass an id on the end of the url (eg. ?nav=2) or parse the URL and check against it...

All of them work... all of them have there pros and cons... just depends on how your page is set up...


Give each page's body tag an ID. Say, you give the About page's body tag the id "about". Give IDs for all your navigation <li>s too. Say, you give "about" id to the navigation <li>

In your CSS file, do this:

body#about li#about {
   // apply differentiating style here...
}

You can keep doing that for all other pages also. And only when both the body ID and the <li> ID match, the style is applied.

0

精彩评论

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

关注公众号