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.
If 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.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论