Выделение активного пункта меню
Привет!
Выделение активного пункта меню есть рабочий код, он исправно работает и подсвечивает другим светом активное меню в меню есть 3 ссылки http://test/index.php?search=mama http://test/index.php?search=papa http://test/index.php?search=ya ссылка из меню будет подсвечена если я введу саму ссылку вида http://test/index.php?search=papa в поисковой строке браузера то ее подсветит другим светом Но у меня есть проблема, я перешол на станицу http://test/index.php?search=papa у меня есть пагинация идут страницы потом такого вида http://test/index.php/page2?search=papa и все кирдык подсветка активного пункта меню (papa) слетает как решить мне эту задачу? чтобы пункт меню (papa) был активен даже если я перейду по ссылке http://test/index.php/page2?search=papa или http://test/index.php/page33?search=papa или любой другой номер страницы! Спасибо.
<style>
#menu ul li a{
text-decoration:underline;
}
#menu ul li a:hover {
color:#4996e5;
}
#menu ul li a.active{
color:#4996e5;
text-decoration:none;
}
</style>
<script>
$(function () {
$('#menu a').each(function () {
var location = window.location.href;
var link = this.href;
if(location == link) {
$(this).addClass('active');
}
});
});
</script>
<div id="menu">
<ul>
<li><a href="http://test/index.php?search=mama">mama</a></li>
<li><a href="http://test/index.php?search=papa">papa</a></li>
<li><a href="http://test/index.php?search=ya">ya</a></li>
</ul>
</div>
|
sergofedor06,
зачем засорять форум? создали тему, зачем ещё-то? |
почему засорять, тут уникальное описание его нигде не постил
|
в тех темах может сложно описал! тут вроде проще у меня вышло передать свои мысли, может кто что подскажет.
|
Цитата:
http://javascript.ru/forum/misc/59682-ehffekt-s-ssylkojj.html |
sergofedor06,
<style>
#menu ul li a{
font-size: 24px;
text-decoration:underline;
}
#menu ul li a:hover {
color:rgba(255, 0, 0, 1);
}
#menu ul li a.active{
color: rgba(255, 0, 0, 1);
text-decoration:none;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
var search = window.location.search;
search = decodeURIComponent(search);
$("[href$='"+search+"']").addClass('active');
});
</script>
<div id="menu">
<ul>
<li><a href="?search=mama">mama</a></li>
<li><a href="?search=papa">papa</a></li>
<li><a href="?search=ya">ya</a></li>
</ul>
</div>
|
Спасибо, работает но не совсем корректно.
к примеру я перехожу по ссылке <li><a href="?search=papa">papa</a></li> этот пункт меню у меня подсвечивается красным, далее идет к примеру постраничная навигация выглядит так страница http://test/index.php/page2?search=papa тоже все ок! меню (papa) подсвечивается, и значит я к примеру сейчас нахожусь на странице http://test/index.php/page2?search=papa и потом решаю перейти на другой пунк меню к примеру (mama) и тут открывается страница не вида http://test/index.php?search=mama а вида http://test/index.php/page2?search=mama а должно открывать главную страницу http://test/index.php?search=mama |
как убрать эту наследственность page2
чтобы page2 или page3 и всех остальных номеров не прибавлялись |
да и такой вариант работает только с латиницей
<div id="menu"> <ul> <li><a href="?search=mama">mama</a></li> <li><a href="?search=papa">papa</a></li> <li><a href="?search=ya">ya</a></li> </ul> </div> если кириллица, так то не подсвечивает меню вообще! <div id="menu"> <ul> <li><a href="?search=мама">мама</a></li> <li><a href="?search=папа">папа</a></li> <li><a href="?search=я">я</a></li> </ul> </div> почему так? |
мой вариант работает с кириллицей!
<style>
#menu ul li a{
text-decoration:underline;
}
#menu ul li a:hover {
color:#4996e5;
}
#menu ul li a.active{
color:#ed0b30;
text-decoration:none;
}
</style>
<script>
$(function () {
$('#menu a').each(function () {
var location = window.location.href;
var link = this.href;
if(location == link) {
$(this).addClass('active');
}
});
});
</script>
<div id="menu">
<ul>
<li><a href="?search=мама">мама</a></li>
<li><a href="?search=папа">папа</a></li>
<li><a href="?search=я">я</a></li>
</ul>
</div>
только остается проблема, что описал выше...... меню (papa) подсвечивается, и значит я к примеру сейчас нахожусь на странице http://test/index.php/page2?search=papa и потом решаю перейти на другой пункт меню к примеру (mama) и тут открывается страница не вида http://test/index.php?search=mama а вида http://test/index.php/page2?search=mama а должно открывать главную страницу http://test/index.php?search=mama |
| Часовой пояс GMT +3, время: 09:54. |