Привет! Мне нужна помощь, чтобы моя навигация показывала активную ссылку, выделенную на текущей странице.Другими словами, когда я нажимаю на ссылку, чтобы перейти на новую страницу, я хочу, чтобы эта ссылка была выделена после открытия новой страницы.Я мог бы справиться с этим с помощью CSS, добавив класс к активной ссылке на каждой странице, но, поскольку будет много страниц, я бы предпочел сделать это динамически с JS.
Как я могу это сделать с помощью Javascript? ... Я буду признателен за вашу помощь, спасибо.
Ниже приведен код, который я использую, не стесняйтесь редактировать, как вам удобно.
Вот HTML, просто список для структурирования навигации
<ul class="menu collapsible">
<li id="main">
<a href="http://google.com">About SfT</a>
<ul class="acitem">
<li><a href="page1.html">page1</a></li>
<li><a href="page2.html">page2</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a id="main" href="#">Your Life</a>
<ul class="acitem">
<li><a href="page3.html">page3</a></li>
<li><a href="">Ruby</a></li>
<li><a href="">Python</a></li>
<li><a href="">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li>
<a id="main" href="">Your Health</a>
<ul class="acitem">
<li><a href="http://bookalicio.us/">Bookalicious</a></li>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li>
<a id="main" href="#">Your Call</a>
<ul class="acitem">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
CSS (очень минималистичный, только для целей тестирования):
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
p {
line-height: 1.5em;
}
#main {font-size:2em;}
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
color: #666;
padding: 0.5em;
font-weight: bold;
font-size: 1em;
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
color: #900;
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
color: #999;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
color: #900;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
color: #900;
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #090;
margin: 0;
padding: 0;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #900;
}
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }
JavaScript:
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.menu').initMenu();});