12.02.2010, 00:35
|
Новичок на форуме
|
|
Регистрация: 11.02.2010
Сообщений: 9
|
|
Написал функцию, а WebKit её не понимает
Здравствуйте, я только начал изучать JavaScript. И сразу же пришлось пробовать написать функцию, которая должна менять класс у элемента списка, тем самым достигается подсветка активного пункта меню. Принадлежность определяется по document.title. В Опере, Ослике 8 и Фоксе все работает замечательно, а в WebKit производных браузерах не хочет подсвечиваться активное меню, т.е. само меню формируется, но подсветка не работает. Из всех вариантов решения данного вопроса на JavaScript, заработал только этот. Привожу сам код:
в HTML:
<div id="mainmenu">
<script type="text/JavaScript" src="/lib/tpl/mysite/js/mainmenu.js"></script>
</div>
Сама функция (для краткости привожу два пункта меню, всего их 6):
titArray = new Array()
titArray [0] = "Главная [Мой сайт]"
titArray [1] = "Блог [Мой сайт]"
titArray [2] = "Проект [Мой сайт]"
urlArray = new Array()
urlArray [0] = "/start"
urlArray [1] = "/blog"
urlArray [2] = "/projects"
mnuArray = new Array()
mnuArray [0] = "<span>Главная</span>"
mnuArray [1] = "<span>Блог</span>"
mnuArray [2] = "<span>Проект</span>"
var libegin = "<li>"
var lnk1 = "<a href='"
var lnk2 = "' class='unactive' target='_parent'>"
var lnk22 = "' class='active' target='_parent'>"
var lnk3 = "</a>"
var liend = "</li>"
document.write("<ul class='menu'>")
if (document.title == titArray[0])
{document.write(libegin+lnk1+urlArray[0]+lnk22+mnuArray[0]+lnk3+liend)}
else
{document.write(libegin+lnk1+urlArray[0]+lnk2+mnuArray[0]+lnk3+liend)}
if (document.title == titArray[1])
{document.write(libegin+lnk1+urlArray[1]+lnk22+mnuArray[1]+lnk3+liend)}
else
{document.write(libegin+lnk1+urlArray[1]+lnk2+mnuArray[1]+lnk3+liend)}
if (document.title == titArray[2])
{document.write(libegin+lnk1+urlArray[2]+lnk22+mnuArray[2]+lnk3+liend)}
else
{document.write(libegin+lnk1+urlArray[2]+lnk2+mnuArray[2]+lnk3+liend)}
Подскажите в чем может быть проблема? Возможно есть более элегантный вариант решения?
|
|
12.02.2010, 02:41
|
Аспирант
|
|
Регистрация: 08.12.2009
Сообщений: 32
|
|
Может у вас проблема со стилями какая то , не думаю что проблема в джаваскрипте. Если вы будете любезны дать ссылку(на ваш работающий "скрипт/страницу"), то может посмотримс
|
|
12.02.2010, 09:16
|
Новичок на форуме
|
|
Регистрация: 11.02.2010
Сообщений: 9
|
|
Да вроде проверял стили - валидацию проходят. Ссылки нет к сожалению, поскольку сайт еще в разработке и пока на локальном компьютере. Если необходимо, то могу привести кусок CSS кода отвечающий за меню.
|
|
12.02.2010, 09:49
|
Аспирант
|
|
Регистрация: 08.12.2009
Сообщений: 32
|
|
Хм. А как связано то, что они проходят валидацию с кроссбраузерностью ? Не вижу никакой связи. То что они соответствуют стандартам, не говорит о том, что они грамотно написаны
|
|
12.02.2010, 10:05
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от Arkaim
|
Подскажите в чем может быть проблема? Возможно есть более элегантный вариант решения?
|
точно есть, все переписывать лень, привожу начало рефакторинга:
var a;
a= [
{ razdel:"Главная [Мой сайт]",url:"/start",span:"<span>Главная</span>" },
{ razdel:"Блог [Мой сайт]",url:"/blog",span:"<span>Блог</span>" },
{ razdel:"Проект [Мой сайт]",url:"/projects",span:"<span>Проект</span>" }
];
alert(a[1].url);
//далее все выбросить что было написано и пойти читать про работу с DOM
http://javascript.ru/tutorial/dom/modify
http://javascript.ru/tutorial/dom
Последний раз редактировалось Gozar, 12.02.2010 в 10:11.
Причина: добавил пример :)
|
|
12.02.2010, 13:31
|
Новичок на форуме
|
|
Регистрация: 11.02.2010
Сообщений: 9
|
|
sergdev, по идее браузеры должны соответствовать стандартам, то что существуют проблемы движка Ослика и мелкие у других, это я знаю. Дело в том что на событие hover тоже висит подсветка активного пункта меню и она работает во всех браузерах. Отсюда делаю вывод что проблемы со скриптом.
Gozar, спасибо буду читать и пробывать.
|
|
12.02.2010, 13:33
|
Аспирант
|
|
Регистрация: 08.12.2009
Сообщений: 32
|
|
Сообщение от Arkaim
|
sergdev, по идее браузеры должны соответствовать стандартам, то что существуют проблемы движка Ослика и мелкие у других, это я знаю. Дело в том что на событие hover тоже висит подсветка активного пункта меню и она работает во всех браузерах. Отсюда делаю вывод что проблемы со скриптом.
Gozar, спасибо буду читать и пробывать.
|
Попробуйте взять хтмл просто написать и проверить во всех браузерах и так узнаете где проблема.
|
|
12.02.2010, 16:08
|
Новичок на форуме
|
|
Регистрация: 11.02.2010
Сообщений: 9
|
|
sergdev, благодарю! Тоже идея, вечером буду пробовать...
|
|
12.02.2010, 17:35
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от Arkaim
|
sergdev, благодарю! Тоже идея, вечером буду пробовать...
|
чего тут пробовать, нужно как я сказал выбросить то что ниже определения объекта для меню и менять класс так:
element.style.className = 'active';
не надо там никаких document.write(), нужно прочитать как работают с DOM.
|
|
12.02.2010, 17:38
|
Аспирант
|
|
Регистрация: 08.12.2009
Сообщений: 32
|
|
Сообщение от Gozar
|
чего тут пробовать
|
Я согласен с твоим сообщением, НО речь идет уже о принципе. Человек начал изучать джаваскрипт, в первом моем сообщение здесь я хотел ему посоветовать вообще не привязываться к document.title, ведь все это можно сделать как минимум на server-side языке. Это если говорить о правильном подходе, но думаю, что человек загнется если для того, чтобы показать какое то несчастное меню, нужно будет еще и пхп юзать и тд. Без обид, но подозреваю, что человек мало имеет представления вообще о программировании. Пусть учится отлавливать проблемы, etc. Я так понимаю, что это ж в образовательных целях. Вряд ли он бы взял коммерческое задание, будучи еще не профессионалом.
|
|
|
|