14.09.2014, 11:29
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
Выбрать часть ссылки
Всем здрасьте!
Помогите пожалуйста новичку!
Мне необходимо выделить активную кнопку меню. Все бы просто, да не все.
a href в <li> имеет значение (пример) project.php?id=ob_info_vvod_info а вся ссылка http://сайт/mat/project.php?id=ob_info_vvod_info.
Сама процедура выделения активной кнопки стандртна:
var url=document.location.href;
$.each($(".menu_main.blue a"),function(){
if(this.href==url){$(this).addClass('blue_on');};
})
Но затык в переменной url, она не соответствует моему href. Как обрезать url до href ? Навернякапросто, но не нашел нигде доходчивой информации.
Последний раз редактировалось Artem_M1507, 14.09.2014 в 11:32.
|
|
14.09.2014, 12:33
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
Это не так. Атрибут "href" содержит именно то что написано, а вот свойство href всегда содержит полную ссылку:
<a href="project.php?id=ob_info_vvod_info">link</a>
<script>
var a = document.querySelector('a');
alert([
'document.location.href = ' + document.location.href,
'a.getAttribute(\'href\') = ' + a.getAttribute('href'),
'a.href = ' + a.href
].join('\n'));
</script>
Если же нужно обрезать именно параметры:
alert( 'project.php?id=ob_info_vvod_info'.replace(/\?.*?$/,'') );
__________________
29375, 35
Последний раз редактировалось Aetae, 14.09.2014 в 12:40.
|
|
14.09.2014, 12:58
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
Сообщение от Aetae
|
Это не так. Атрибут "href" содержит именно то что написано, а вот свойство href всегда содержит полную ссылку:
<a href="project.php?id=ob_info_vvod_info">link</a>
<script>
var a = document.querySelector('a');
alert([
'document.location.href = ' + document.location.href,
'a.getAttribute(\'href\') = ' + a.getAttribute('href'),
'a.href = ' + a.href
].join('\n'));
</script>
Если же нужно обрезать именно параметры:
alert( 'project.php?id=ob_info_vvod_info'.replace(/\?.*?$/,'') );
|
Да, Вы правы. Я уже сделал что хотел, но теперь вопрос стоит с заменой классов. Пришлось извращаться, чтобы "вдавить" кнопку меню вот таким образом:
$(document).ready(function(){ /*Start DocumentReady*/
var url= window.location.href;
$.each($(".menu_main.blue li a"),function(){
if(this.href==url){
$(this).css({'color' : '#005388',
'background' : '#ececec',
'background-position' : '3px 50%',
'box-shadow' : '0 3px 3px rgba(0, 0, 0, .4) inset'
});
};
})
});
А как сделать правильно? Не менять свойства css, а через добавление класса. При добавлении у меня получается какой-то промежуточный результат, т.е. кнопка меняется в цвете, но не "вдавливается", хотя все свойства css указываю. Т.е. если просто заменить класс на все меню, то все ок - одни кнопки меняются на другие, а вот в данном коде как-то не до конца все происходит, наверное что-то нужно удалить, но пробовал удалять все подряд (через removeClass) и - фиг.
|
|
14.09.2014, 13:12
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
Очевидно тут вопрос приоритета css. Без всякого js вручную пропишите класс и посмотрите почему он не действует.
__________________
29375, 35
|
|
14.09.2014, 13:21
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
Сообщение от Aetae
|
Очевидно тут вопрос приоритета css. Без всякого js вручную пропишите класс и посмотрите почему он не действует.
|
Класс действует правильно если его подключить не чрез jquery
Я совсем еще новичок в джаве, подскажите, пжлст, новый класс должен перекрывать все прежние или прежние надо удалять?
Последний раз редактировалось Artem_M1507, 14.09.2014 в 13:37.
|
|
14.09.2014, 13:37
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
js не делает с классми ничего, чего бы вы не делали сами вручную. Разницы в поведении быть не должно. Смотрите в "инспекторе" чем отличается указанный вручную класс от того что навесили через js.
__________________
29375, 35
|
|
14.09.2014, 13:52
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
Сообщение от Aetae
|
js не делает с классми ничего, чего бы вы не делали сами вручную. Разницы в поведении быть не должно. Смотрите в "инспекторе" чем отличается указанный вручную класс от того что навесили через js.
|
ок. спасибо.
|
|
14.09.2014, 14:07
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
Решил вопрос со стилями - добавил parent() итог:
$(this).parent().addClass('activeLink');
|
|
14.09.2014, 15:36
|
Новичок на форуме
|
|
Регистрация: 14.09.2014
Сообщений: 6
|
|
3-й день изучаю jquery,а уже решил поделиться опытом (встречал вопрос на просторах инета). В общем сделал вложенное меню. У меня главное меню вертикальное, а доп меню горизонтальное уже в разделе (ну перешел по ссылке и в появившейся рабочей области менюшка раздела... не люблю я эти каскадные меню, поэтому сделал так). Задача стояла не отцепить нажатую кнопку главного меню при нажатии на кнопки вложенной менюшки раздела. В общем решил так:
$(document).ready(function(){
$.each($(".menu_main.blue li a"),function(){
var url2= window.location.href.slice(window.location.href.indexOf('=')+1,window.location.href.indexOf('=')+5);
var link2 = this.href.slice(this.href.indexOf('=')+1, this.href.indexOf('=')+5);
if(link2==url2){
$(this).parent().addClass('activeLink');
};
});
});
$(document).ready(function(){
$.each($(".menu_proj li a"),function(){
var link = this.href;
var url= window.location.href;
if(link==url){
$(this).parent().addClass('activeLinkproj');
};
});
});
Кнопки вложенного меню и главное меню имеют общий корень в хрефе. Например (1 раздел главного меню):
http://сайт/mat/project.php?id=ob_info_vvod_info - это ссылка кнопки главного меню и по совместительству первая вкладка вложенного меню раздела
http://сайт/mat/project.php?id=ob_info_razv - это следующая кнопка вложенного меню.
И т.д. Отличаются они только окончанием, а корень (ob_info) у них общий. Поэтому я решил вырезать из ссылки 4 символа после знака равенства (ob_i, больше не стал, т.к. другие разделы главного чуть короче называются) - это будет маяк для кнопки главного меню (url2=link2), а кнопки вложенного меню (функция №2) будут реагировать на полное совпадение адреса окна и хрефа (URL=href). В итоге ссылка меняется, активные кнопки внутри раздела отмечаются и в главном меню кнопка раздела не отцепляется пока находишься внутри этого самого раздела.
Вот как-то так
Последний раз редактировалось Artem_M1507, 14.09.2014 в 16:16.
|
|
|
|