Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка пункта меню JS - JQery (https://javascript.ru/forum/dom-window/75708-podsvetka-punkta-menyu-js-jqery.html)

oslayer 31.10.2018 14:33

Подсветка пункта меню JS - JQery
 
Здравствуйте! Помогите пожалуйста. чайник, js не дружу :(

Что делаю не так?
Должно быть - нажал на пункт меню - подсветился активный пункт меню, нажал на другой пункт меню - подсветка перешла на активный пункт меню
Класс act - прописан, при присваивании в ручную - подсветка работает

Но не работает.


Есть код JS
<script>
$(function () {
    var location = window.location.href;
    var cur_url = '/' + location.split('/').pop();
 
    $('.pt_high_custommenu div.pt_menu').each(function () {
        var link = $(this).find('a').attr('href');
 
        if (cur_url == link)
        {
            $(this).addClass('act');
        }
    });
});
</script>


В идеале вот сюда и должен попадать класс act
Код:

<div class="pt_menu nav-1 act pt_menu_no_child">
Собственно само меню
Код:

<div class="lmenu">               
               
<div class="pt_high_custommenu">
<div class="pt_menu nav-1 pt_menu_no_child">
<div class="parentMenu">
<a href="http://made-in-altai.ru/login">
<span>Пункт 1</span>
</a>
</div>
</div>
<div class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 2</span>
</a>
</div>
</div><div class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 3</span>
</a>
</div>
</div><div class="pt_menu nav-4 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 4</span>
</a>
</div>
</div><div  class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 5</span>
</a>
</div>
</div>
</div>
</div>


<div class="rmenu">
                <div class="pt_high_custommenu">
<div class="pt_menu nav-1 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 6</span>
</a>
</div>
</div>
</div>
</div>


Dilettante_Pro 31.10.2018 15:13

<style>
.act { background-color:green; }
</style>
<div class="lmenu">		
		
<div class="pt_high_custommenu">
<div class="pt_menu nav-1 pt_menu_no_child">
<div class="parentMenu">
<a href="http://made-in-altai.ru/login">
<span>Пункт 1</span>
</a>
</div>
</div>
<div class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="https://lookatcode.com/showhtml">
<span>Пункт 2</span>
</a>
</div>
</div><div class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 3</span>
</a>
</div>
</div><div class="pt_menu nav-4 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 4</span>
</a>
</div>
</div><div  class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 5</span>
</a>
</div>
</div>
</div>
</div>


<div class="rmenu">
		<div class="pt_high_custommenu">
<div class="pt_menu nav-1 pt_menu_no_child">
<div class="parentMenu">
<a href="http://login">
<span>Пункт 6</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script> 
$(function () {
    var location = window.location.href;
//    var cur_url = '/' + location.split('/').pop();
 
    $('.pt_high_custommenu div.pt_menu').each(function () {
        var link = $(this).find('a').attr('href');
        console.log(link, location, location == link);
        if (location == link)
        {
            $(this).addClass('act');
        }
    });
});
</script>

oslayer 31.10.2018 15:35

Спасибо! всё заработало:dance:


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