Всегда при первой загрузки активный первый пукт меню

[Mary_RND]

Добрый день.

 

Мне надо сделать чтобы при загрузки страницы или обновлении, первый пункт меню всегда горел активный.
Применила простой код вроде, но он делает активным все пукты меню >.<
И пропадает активность, когда выпадает меню и туда переводишь курсор мышки ((

Как справиться с этой напастью?
 

   $('.menu_dop .main a').each(function () {        var location = window.location.href;        var link = this.href;        if(location == link) {            $(this).addClass('active');        }    });

<nav class="menu_dop">        <ul class="blockeasing">            <li class="main clinical"><a href="#">Общеклинические направления</a>                <div class="menu__drop">                    <div class="menu__wrap">                        <ul>                            <li><a href="#">Акушерство</a></li>                            <li><a href="#">Андрология</a></li>                            <li><a href="#">Гастроэнтерология</a></li>                            <li><a href="#">Гепатология</a></li>                        </ul>                        <ul>                            <li><a href="#">Кардиология</a></li>                            <li><a href="#">Косметология</a></li>                            <li><a class="menu__drop__link new" href="#">Маммология</a></li>                            <li><a href="#">Неврология</a></li>                        </ul>                        <ul>                            <li><a href="inner.html">Офтальмология</a></li>                            <li><a href="#">Проктология</a></li>                            <li><a href="#">Психотерапия</a></li>                            <li><a href="#">Стоматология</a></li>                        </ul>                    </div>                </div>            </li>            <li class="main cosmetology"><a href="#">Косметология</a></li>            <li class="main plastic_surgery"><a href="#">Пластическая хирургия</a>                <div class="menu__drop">                    <div class="menu__wrap">                        <ul>                            <li><a href="#">лицо</a></li>                            <li><a href="#">нос</a></li>                            <li><a href="#">веки</a></li>                        </ul>                        <ul>                            <li><a href="#">уши</a></li>                            <li><a href="#">живот</a></li>                            <li><a href="#">грудь</a></li>                        </ul>                        <ul>                            <li><a href="#">интимная пластика</a></li>                            <li><a href="#">липоскульптура</a></li>                            <li><a href="#">рубцы</a></li>                        </ul>                    </div>                </div>            </li>            <li class="main stomatology"><a href="#">Стоматология</a></li>                <div class="menu__drop">                    <div class="menu__wrap">                        <ul>                            <li><a href="#">озонотерапия</a></li>                            <li><a href="#">реставрация зубов</a></li>                            <li><a href="#">уз чистка зубов</a></li>                            <li><a href="#">лазерные технологии</a></li>                        </ul>                        <ul>                            <li><a href="#">лазерное отбеливание</a></li>                            <li><a href="#">профессиональная чистка</a></li>                            <li><a href="#">терапия</a></li>                            <li><a href="#">хирургия</a></li>                        </ul>                        <ul>                            <li><a href="#">пародонтология</a></li>                            <li><a href="#">ортодонтия</a></li>                            <li><a href="#">ортопедия</a></li>                            <li><a href="#">советы стоматологов</a></li>                        </ul>                    </div>                </div>            </li>        </ul>    </nav>

[abrahadabra]

var link = this.href;

где-то здесь наверное что-то не так?

var link = $(this).attr('href');

такое наверное имелось в виду?

[Igor Schnaider]

Добавлю, window.location.href возвращает полный адрес, а у вас ссылки, вероятно, с относительным адресом будут. И не надо в цикл его пихать, один раз же достаточно получить.

[Mary_RND]

var link = this.href;

где-то здесь наверное что-то не так?

var link = $(this).attr('href');

такое наверное имелось в виду?

 

 

Ага... поправила.

 

 

Добавлю, window.location.href возвращает полный адрес, а у вас ссылки, вероятно, с относительным адресом будут. И не надо в цикл его пихать, один раз же достаточно получить.

 

Если пишешь просто

$(this).addClass('active');

то он ставит всем первым пунктам

 

А мне надо:

- Первый пункт активный при загрузки страницы (кстати, получается когда он уже на странице одного из подпунктов меню, то активно должно быть то меню, к какому подпункт относится >.<)

- При перемещение между меню, активность у первого соответственно уходит.

- При переходе курсором на выпадающее меню, активность не должна пропадать.

 

Я находила несколько вариантов скриптов, но либо я не поняла принцип действия или оно не подходило под выпадающее меню T____T

[abrahadabra]

что-то сильно странное. А можно где-нибудь это увидеть? На каком-нибудь демо-сервере может?

(jsfiddle в данном случае не лучший вариант, ясное дело)

 

$(this).addClass должно установить только тому объекту, в контексте которого выполняется, и не иначе.

[Mary_RND]

что-то сильно странное. А можно где-нибудь это увидеть? На каком-нибудь демо-сервере может?

(jsfiddle в данном случае не лучший вариант, ясное дело)

 

$(this).addClass должно установить только тому объекту, в контексте которого выполняется, и не иначе.

 

http://unionclinic.aveas.ru/main.html

Сижу и подумываю может это табами сделать... ><

Меню, которое находится на слайдере

[abrahadabra]

там же нет никаких ссылок

[Switch74]

1. ссылки у вас там все '#'
2. window.location.pathname сравниваем с $(this).attr('href') через indexOf или match
 

[Mary_RND]

Да, все # пока что,  просто нету еще других страниц ><

[SelenIT]

var link = this.href;

где-то здесь наверное что-то не так?

var link = $(this).attr('href');

такое наверное имелось в виду?

 

 

Исходный вариант тоже будет работать, но свойство href вернет уже полный развернутый URL, а не чисто значение атрибута: https://jsfiddle.net/paqbzs4c/