Вылеление активных пунков меню. Нужна помощь !
Добрый день !
Cразу скажу что с программированием я на вы также и с JAVA. Такчто сильно не пинайте) Ситуация следующая: потребовалось сделать выделение активных пунков меню на сайте, я добавил в меню ****.тпл ява скрипт который смотрит в div id="ttt" все ссылки и сверяет с адресом текущей страницы и если адрес совпадает с какой то ссылкой, то этой ссылке присваивается class="left_menu_selected" и ссылка начинает использовать этот класс из css'ок... вот собственно и весь процесс... сам скрипт:
<script type="text/javascript">
$.each($("#ttt a"), function(){if(this.href == location.href.split('?')[0].split('#')[0]) this.className = "left_menu_selected";});
</script>
все работает, но проблемма вылезла следующая: помимо основного меню (которое вверху страницы) существует еще боковое подменю, когда открываем ссылку с бокового, то выделение верхнего меню пропадает.., конечно оно пропадает из-за того, что активная ссылка(адресс открытой страницы) изменяется. Ну а боковая ссылка выделяется как положено... Я понимаю, что все решила бы жетская привязка выделения пункта меню к нескольким ссылкам, сайт нетакой большой, и руками это приписать не составит труда, вопрос только как заставить скрипт сверять ссылку пункта меню с несколькими (зараенее прописаными) ссылками? |
<script type="text/javascript">
$(document).ready(function(){
var TstLink = document.url.split('?')[0].split('#')[0];
$("body a").each( function(){
if($(this).attr("href") == TstLink) $(this).addclass("left_menu_selected");
});
});
</script>
|
Цитата:
И
var TstLink = document.url.split('?')[0].split('#')[0]
$("body a[data]").each( function(){
Flag=false;
var a_Array= eval($(this).attr("data"));
for(var i in a_Array){
if(TstLink==a_Array[i]){Flag=true;break;}
}
if(Flag) $(this).addclass("left_menu_selected")
});
|
Deff, помогите пожалуйста... у меня такая же проблема с меню и у меня не получается использовать ваш код...
у меня есть 2 меню вида
<div id="123">
<ul>
<li><a href="1">1<a/></li>
<li><a href="2">2<a/></li>
</ul>
</div>
<div id="456">
<ul>
<li><a href="11">1.1<a/></li>
<li><a href="22">2.2<a/></li>
</ul>
</div>
и я хочу объединить (выделить) ссылки 1 и 1.1 добавляю ссылкам атрибут data="['Lonk1']" и ниже ставлю ваш код
<script type="text/javascript">
var TstLink = document.url.split('?')[0].split('#')[0]
$("body a[data]").each( function(){
Flag=false;
var a_Array= eval($(this).attr("data"));
for(var i in a_Array){
if(TstLink==a_Array[i]){Flag=true;break;}
}
if(Flag) $(this).addclass("left_menu_selected")
});
</script>
но класс ссылкам не добавляется... что я делаю не так? если вас не затруднит, покажите как вся конструкция должна выглядеть в html варианте... заранее спасибо! |
aults,
Поясните задачку полностью, для сверки единственного линка по ссылке - этих финтов не нужно
<div id="123">
<ul>
<li><a href="1">1<a/></li>
<li><a href="2">2<a/></li>
</ul>
</div>
<div id="456">
<ul>
<li><a href="11">1.1<a/></li>
<li><a href="22">2.2<a/></li>
</ul>
</div>
<script type="text/javascript">
var TstLink = document.url;
$("div[id] > ul > a").each( function(){
if(TstLink==this.href)$(this).addclass("left_menu_selected");
});
</script>
|
Deff,
задача и проблема аналогична первому посту |
Цитата:
|
Цитата:
|
Цитата:
|
Deff,
дак все то же самое и скрипт изначально я тот же использую
<script type="text/javascript">
$.each($("#ttt a"), function(){if(this.href == location.href.split('?')[0].split('#')[0]) this.className = "left_menu_selected";});
</script>
но не могу присвоить класс ссылке основной страницы, если открыта дополнительная... |
aults,
Выложите Ваш код попыток - мну поправит |
Deff,
я хочу сделать так же как тут - при переходе на http://www.null.ru/services/ выделена только ссылка услуги (текущая страница)... а при переходе на http://www.null.ru/services/graphics/ выделены 2 ссылки "услуги" и "графика" у меня получилось выделить только текущую страницу этим кодом
<script type="text/javascript">
$.each($("#ttt a"), function(){if(this.href == location.href.split('?')[0].split('#')[0]) this.className = "left_menu_selected";});
</script>
как выделить ссылку на текущую страницу и страницу выше уровнем находясь на дополнительной, но при этом не выделять ссылку на доп страницу, если открыта страница верхнего уровня? как то так... код попытки я же уже приводил выше... |
aults,
ясно -> http://www.null.ru/services/graphics/ *вышеприведенный код был несколько для иного |
aults,
Вопроса: Приведите вид для пары ссылок в атрибуте href=" выделяемой ссылки |
Deff,
<a href="/usludi_po_ozeleneniyu.html">Услуги по озеленению<a/> <a href="/usloviya.html">Условия<a/> <a href="/ceny.html">Цены<a/> |
aults,
Зы - тады непонятно опять На указанном Вами форуме ссылки выделяются по принципу наличия вхождения -> http://www.null.ru/services/graphics/ как конечной папки так и хотя бы родительской Ваши ссылки пока никак не связаны У топик стартера осуществлялся поиск на странице по коду в якоре ( вида #aaaa,#bbbb прикрепляемых к текущей ссылке ================================================ Т.е пока неясен главный Вопрос - какие ссылки уВас на странице подлежат Выделению |
<a href="/usludi_po_ozeleneniyu.html">Услуги по озеленению<a/> - основная
<a href="/usloviya.html">Условия<a/> - дополнительная <a href="/ceny.html">Цены<a/> - дополнительная я же сразу сказал что у меня так же как и у тса и даже скрипт используется тот же самый что и у него... |
aults,
Чел, чтобы идентифицировать нужные ссылки к адресу приклеивает href://aдрес?a=чтот-то#некий идентификатор Вот его(идентификатор) в Data ccылок и ищем |
скрипт я взял отсюда http://helper.ucoz.ru/load/all/ochen...sylki/1-1-0-60 и тс скорее всего тоже... и он просто сканирует блок ссылок и выделяет ссылку страницы открытой в данный момент... и никаких идентификаторов... поэтому и снимается выделение с основной при переходе на дополнительную т.к. урл уже другой... а надо чтоб не снималось... как сделать чтобы не снималось? простой пример хтмл кода и прошу, потому что не получается у меня разобраться...
|
aults,
Рисуйте Ваше меню - иначе я не врублюсь (где главная - не главная - помечайте |
Deff,
вот вся конструкция в данный момент
<div id="ttt">
<ul>
<a href="/usludi_po_ozeleneniyu.html">Услуги по озеленению<a/> - основная
<a href="/usloviya.html">Условия<a/> - дополнительная
<a href="/ceny.html">Цены<a/> - дополнительная
</ul>
</div>
<script type="text/javascript">
$.each($("#ttt a"), function(){if(this.href == location.href.split('?')[0].split('#')[0]) this.className = "left_menu_selected";});
</script>
|
aults,
Т. е если совпала - хоть одна ссылка с ссылкой в Адресной строке - нам нужно поставить выделения на все ссылки выше данной, включая и её саму ? |
Deff,
да |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#ttt a.active {
color:red!important;
}
</style>
<div id="ttt">
<ul>
<a href="/usludi_po_ozeleneniyu.html">Услуги по озеленению</a> - основная<br />
<a href="/usloviya.html">Условия</a> - дополнительная<br />
<a href="/ceny.html">Цены</a> - дополнительная<br />
</ul>
</div>
<script type="text/javascript">
var TstLink =location.href.split('?')[0].split('#')[0].replace(/^.*[^\/]\//g,'/');
var TstLink = "/usloviya.html" //Тестовая строка -только для теста, затем убрать
$("#ttt ul a").each(function(){
if($(this).attr('href').indexOf(TstLink)!=-1){
var Arr_a=$(this).parent().find('a');
var Cickl=Arr_a.index(this);
for(var i=0; i<=Cickl; i++){
Arr_a.eq(i).addClass('active')
}
}
});
</script>
|
Deff,
хорошо, а по какому принципу скрипт определяет главную (верхнюю) ссылку |
aults,
Он находит текущую ссылку, - далее смотрит её индекс в массиве ссылок родительского блока - далее проставляет class=active от 0(это и есть первая ссылка до текущего индекса(включая его) Текущий индекс = это Cickl) |
Deff,
Почитал вашу переписку с Aults, заданый вопрос решился..., спасибо вам! но возник другой: теперь таже проблемма с боковым меню:
[xfgiven_leftcol]
<div id="ttt">
<div class="LeftCol ">
<ul class="left_menu">
[xfgiven_name1]
<li>
<a href="[xfvalue_link1]" target="">[xfvalue_name1]</a>
</li>
[/xfgiven_name1]
[xfgiven_name2]
<li>
<a href="[xfvalue_link2]" target="">[xfvalue_name2]</a>
</li>
[/xfgiven_name2]
[xfgiven_name3]
<li>
<a href="[xfvalue_link3]" target="">[xfvalue_name3]</a>
</li>
[/xfgiven_name3]
[xfgiven_name4]
<li>
<a href="[xfvalue_link4]" target="">[xfvalue_name4]</a>
</li>
[/xfgiven_name4]
</ul>
</div>
</div>
<script type="text/javascript">
$.each($("#ttt a"), function(){if(this.href == location.href.split('?')[0].split('#')[0]) this.className = "left_menu_selected";});
</script>
<div class="container WithoutRightCol">
<div class="content ">
[/xfgiven_leftcol]
Здесь выделение ссылки опять же пропадает при смене текущей ссылки (например при пролистывании страницы) тоесть изначально page1, - ссылка выделена, когда она становится page2 - выделение пропало. как всетаки прописать скрипту четкие ссылки при открытии которых надо "держать" выделение пункта меню ? |
Здравствуйте, форумчане!
Как выделить несколько активных ссылок?
Пример - текущий url /service/design надо выделить ссылку /service также ссылка /service/design должна подсвечиваться... Я так предполагаю не надо сравнивать url и href, а искать совпадения, но как? |
| Часовой пояс GMT +3, время: 07:20. |