How can i change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it will change back.I'm a beginner. I found this link Changing the color of a selected link that is embedded in a table
But It makes my links stop working.... They change color, but dont lonk to anything, and then when I remove the script, they work fine. What am i doing wrong/what do i have to change to make this work??
Thanks you! Son.
How can i change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it will change back.I'm a beginner. I found this link Changing the color of a selected link that is embedded in a table
But It makes my links stop working.... They change color, but dont lonk to anything, and then when I remove the script, they work fine. What am i doing wrong/what do i have to change to make this work??
Thanks you! Son.
Share Improve this question edited May 23, 2017 at 12:01 CommunityBot 11 silver badge asked Nov 2, 2009 at 1:52 Trong SonTrong Son 331 silver badge3 bronze badges 1- Usually you'd specify language in the tags (for example, HTML, CSS, PHP, etc.) What language are you using? – John Commented Nov 2, 2009 at 1:57
5 Answers
Reset to default 3If you want to use this to show the user which sub-page on your site he/she is on, you have to use some sort of serverside-coding (Examples: PHP, ASP, ASP.NET, Python, Ruby or similar) to assign a specific class to the element corresponding with the current page.
The reason for this is, that Javascript cannot be stored between different page loads, so when the link is clicked and changed with Javascript, this will be reset when the new page (that you just requested) is loaded.
If your site consists of just a few flat HTML-pages, you're best off by adding the classes to the correct menu items manually.
Example of how you can arrange your menu:
page1.html
<ul id="menu">
<li><a href="page1.html" class="activeSection">Menuitem 1</a></li>
<li><a href="page2.html">Menuitem 2</a></li>
<li><a href="page3.html">Menuitem 3</a></li>
<li><a href="page4.html">Menuitem 4</a></li>
</ul>
page2.html
<ul id="menu">
<li><a href="page1.html">Menuitem 1</a></li>
<li><a href="page2.html" class="activeSection">Menuitem 2</a></li>
<li><a href="page3.html">Menuitem 3</a></li>
<li><a href="page4.html">Menuitem 4</a></li>
</ul>
Note the position of class="activeSection" - this is what decides where the CSS is applied that changes the look of the selected page.
You could remove the "return false" from the accepted answer in the post you have linked to. By having "return false" there, the default action of the link is prevented from happening.
I have also posted a modified version of the code from the original post and accepted solution to avoid looping over all the links in the document.
<head>
<script>
var selectedEl;
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
// Change the last selected element to unselected
selectedEl.className = 'unselected';
// Change the selected element to the current element
selectedEl = el;
// Change the classname of the selected element to 'selected'
selectedEl.className = 'selected';
}
}
</script>
<style>
.selected { background: #f00; }
</style>
</head>
<body>
<a href="#" class="selected">One</a>
<a href="#" class="unselected">Two</a>
<a href="#" class="unselected">Three</a>
</body>
$("a.selector").click(function()
{
$("a.focused").removeClass('focused');
$(this).addClass('focused');
// do other click event stuff...
return false;
});
Using the jQuery Javascript plugin you should be able to use the following code to achieve the desired effect:
$("a").click(function()
{
$("a.clicked").removeClass("clicked")
$(this).addClass("clicked");
}
You can always use the psuedo class :visited, so you can style a link that has been clicked on.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744389716a4571845.html
评论列表（0条）