Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вылеление активных пунков меню. Нужна помощь ! (https://javascript.ru/forum/dom-window/29883-vylelenie-aktivnykh-punkov-menyu-nuzhna-pomoshh.html)

aults 17.07.2012 19:56

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>

Deff 17.07.2012 20:00

aults,
Т. е если совпала - хоть одна ссылка с ссылкой в Адресной строке - нам нужно поставить выделения на все ссылки выше данной, включая и её саму ?

aults 17.07.2012 20:04

Deff,
да

Deff 17.07.2012 20:40

<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>

aults 18.07.2012 00:48

Deff,
хорошо, а по какому принципу скрипт определяет главную (верхнюю) ссылку

Deff 18.07.2012 00:52

aults,
Он находит текущую ссылку, - далее смотрит её индекс в массиве ссылок родительского блока - далее проставляет class=active от 0(это и есть первая ссылка до текущего индекса(включая его)
Текущий индекс = это Cickl)

panictmn 24.07.2012 09:29

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 - выделение пропало.

как всетаки прописать скрипту четкие ссылки при открытии которых надо "держать" выделение пункта меню ?

a-key 22.01.2014 12:18

Здравствуйте, форумчане!
 
Как выделить несколько активных ссылок?
Пример - текущий url /service/design
надо выделить ссылку /service
также ссылка /service/design должна подсвечиваться...
Я так предполагаю не надо сравнивать url и href, а искать совпадения, но как?


Часовой пояс GMT +3, время: 02:06.