Keep link as active when I move arround page, till I select another link
I have a problem with the links, I have created a menu made by links, which at the same time, indicates the user in what section he is. The menu works fine, but when I start doing things on the section under that link ( which it is pseudo-class active, as its been selected) then the link selected change to a normal link, therefore the user will lose orientation.
I don't think the code its necessary, but just in case anyone need it.
.menu
{
width:100%;
text-align:center;
}
.menu a
{
height:30px;
width:170px;
background-image:url('../Images/item.png');
background-repeat:no-repeat;
background-position:center;
color:Black;
font-weight: bold;
font-family: Arial;
font-size: 11px;
text-decoration: none;
cursor:pointer;
word-spacing:-1px;
border:none;
padding:1px 0px 0px 0px;
margin-top:1px;
}
.menu a:hover
{
background-image:url('../Images/itemHover.png');
background-repeat:no-repeat;
background-position:center;
font-weight: bold;
font-family: Arial;
font-size: 11p开发者_StackOverflow社区x;
text-decoration: none;
cursor:pointer;
word-spacing:-1px;
}
.menu a:active
{
background-image:url('../Images/itemActive.png');
background-repeat:no-repeat;
background-position:center;
color:White;
font-weight: bold;
font-family: Arial;
font-size: 11px;
text-decoration: none;
cursor:pointer;
word-spacing:-1px;
text-decoration: none;
}
<div class="menu" >
<a href='vbscript:show(0)' id='focusme'>Section1</a>
<a href='vbscript:show(6)'> Section2 </a>
<a href='vbscript:show(2)'> Section3 </a>
<a href='vbscript:show(3)'> Section4 </a>
<a href='vbscript:show(4)'> Section5</a>
<a href='vbscript:show(5)'> Section6 </a>
<a href='vbscript:show(1)'> Section7</a>
<a href='vbscript:show(7)'> Section8 </a>
<a href='vbscript:show(8)'> Section9 </a>
<a href="javascript:calllast24()"> Section10</a>
</div>
Can anybody give me a hint on this?
Just define another class active
together with a:active
and add that class to the link in question dynamically (and remove the same class from any other links in the menu).
JavaScript / jQuery is perfectly applicable for this. E.g.
$('.menu a').click(function() {
$('.menu a').removeClass('active');
$(this).addClass('active');
}
Update: or if those links are actually synchronous and you're actually using a server-side view technology like PHP/JSP/ASP, then you'll need to grab its powers instead. Here's a JSP example:
<ul id="menu">
<li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li>
<li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li>
<li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li>
</ul>
The above example only adds class="active"
when the current page matches the link's href. You can do similar in PHP (that ternary operator). Not sure about ASP though.
Add a class name of something like "current" to the currently selected link using JavaScript when it is clicked.
You can recycle the "hover" class or make a unique one.
.menu a:active, .menu a.current
{
background-image:url('../Images/itemActive.png');
background-repeat:no-repeat;
background-position:center;
color:White;
font-weight: bold;
font-family: Arial;
font-size: 11px;
text-decoration: none;
cursor:pointer;
word-spacing:-1px;
text-decoration: none;
}
精彩评论