469,900 Members | 1,694 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,900 developers. It's quick & easy.

How do I change the li class dynamically using a menu.html includefile?

MLD
PLEASE HELP!

I would like to include a UL as a menu, styled by an included CSS
Style Sheet.

The problem I am having is how do I dynamically set the "active" page
class using JavaScript to change each time I click on a new list
item? I have found a bunch of examples but none that really
accomplish what I need.

As I choose from the list, I want the current page selected, evm.htm
for example, to have the following automatically populate using JS so
that the included menu HTML would look like this after tab 2 is
selected:
<ul id="menu">
<li><a href="home.htm">Home</a></li>
<li class="active"><a href="evm.htm">EVM</a></li>
<li><a href="finance.shtml">Finance</a></li>
<li><a href="investments.shtml">Investments</a></li>
<li><a href="OpsAdmin.shtml">Administration</a></li>
<li><a href="subsidiaries.shtml">Subsidiaries</a></li>
</ul>

Home Page: index.shtml

Include File: <!--#include file="menu.html" -->

menu.html
<ul id="menu">
<li><a href="home.htm">Home</a></li>
<li><a href="evm.htm">EVM</a></li>
<li><a href="finance.shtml">Finance</a></li>
<li><a href="investments.shtml">Investments</a></li>
<li><a href="OpsAdmin.shtml">Administration</a></li>
<li><a href="subsidiaries.shtml">Subsidiaries</a></li>
</ul>
CSS (separate file as well)
#menu {
float: right;
background: #fff url(../images/barul.gif) no-repeat bottom right;
color: #808080;
padding: 18px 1px 11px 0;
margin: 0;
}
#menu li{
list-style-type:none;
}

#menu li a{
color:#666;
background:url(baractive.gif) transparent top right no-repeat;
display:block;
padding:0 10px 0 0;
}
#menu li.active,
#menu li.over,
#menu li:hover
{
color: #0066FF;
background: #f8f8f8;
background-color: #EAEAEA;
}
#menu li strong,
ul#menu li.active a{
background: #fff url(../images/baractive_blue4.gif) no-repeat bottom
left;
}
ul#menu li.over a,
ul#menu li:hover a
{
background: #fff url(../images/baractive_blue4.gif) no-repeat bottom
left;
font-weight: bolder;
padding: 14px 18px 14px 18px;
color:#000000;
background-color: #FFFFFF;
text-decoration: none; background:none;
}
Jan 2 '08 #1
3 4316
Response to MLD <ml*******@gmail.com>:
PLEASE HELP!
That screams, "Please help me do my homework!"
I would like to include a UL as a menu, styled by an included CSS
Style Sheet.

The problem I am having is how do I dynamically set the "active"
page class using JavaScript to change each time I click on a new
list item? I have found a bunch of examples but none that really
accomplish what I need.

As I choose from the list, I want the current page selected,
evm.htm for example, to have the following automatically populate
using JS so that the included menu HTML would look like this after
tab 2 is selected:
Are you dynamically switching these tabs? If not, your issue is
server-side and you'd need to detect the current URL and apply the
class server-side.

Otherwise:

http://developer.mozilla.org/en/docs...ment.className

....should suffice.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jan 2 '08 #2
MLD said the following on 1/2/2008 12:36 PM:
>
You are not adding any value or ANSWERING my questions or showing me
HOW to do what I need to do... All you are doing is pointing out what
I am doing wrong.

thanks anyway.
Umm, go slap yourself and wake up. This is Usenyt, you ask a question,
it gets discussed. If you get an answer, great. If you don't, then you
don't. This is not your personal help desk.
TGFY.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 2 '08 #3
MLD
You know what, you can all go and have a WONDERFUL day! If you don't
have anything nice to say, why don't you keep your big mouth shut.
If you don't have an answer, don't use this board to harass people
with your unresolved anger issues.

I am not looking for a personal help desk, I am looking for someone
who might have a simple answer which I already figured out in between
this nonsense.

You must be male and on most days spending most of your time alone.

I will now drop this post and you can say whatever else you want and I
am not going to read it, so save all your sarcasm and useless words
for someone who actually cares...

happy new year to you
xoxo
On Jan 2, 12:47 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
MLD said the following on 1/2/2008 12:36 PM:
You are not adding any value or ANSWERING my questions or showing me
HOW to do what I need to do... All you are doing is pointing out what
I am doing wrong.
thanks anyway.

Umm, go slap yourself and wake up. This is Usenyt, you ask a question,
it gets discussed. If you get an answer, great. If you don't, then you
don't. This is not your personal help desk.
TGFY.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Jan 2 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by KnotKnormal | last post: by
2 posts views Thread by jack | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.