Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить класс li при нажатии на меню (https://javascript.ru/forum/dom-window/53117-izmenit-klass-li-pri-nazhatii-na-menyu.html)

Dryn9 21.01.2015 16:01

Изменить класс li при нажатии на меню
 
Добый вечер. У меня такая проблема:
Есть меню
<div id="webwidget_menu_glide3" class="webwidget_menu_glide">
                  <div class="webwidget_menu_glide_sprite"></div>
                  <ul>
                     <li class="current"><a href="#hdr">Главная</a></li>
                     <li><a href="#content">Наши услуги</a></li>
                     <li><a href="#container12">Наши принципы</a></li>
                     <li><a href="#">Пункт меню</a>
                     </li>
                     <li><a href="#">Пункт меню</a></li>
                  </ul>
                  <div style="clear: both"></div>
               </div>

Надо при нажатии например на "Наши принципы" изменить класс <li> на current
<li class="current"><a href="#container12">Наши принципы</a></li>
а прошлый current убрать. В этом случае убрать current с пункта "Главное". Как это можно сделать?

Safort 21.01.2015 16:03

Прочитай про className и classList. Что-то из них тебе должно подойти.

losos100 21.01.2015 16:40

<html>
<head>
<style>
.current{background: red}
</style>

</head>
 
<body>

<div id="webwidget_menu_glide3" class="webwidget_menu_glide">
                  <div class="webwidget_menu_glide_sprite"></div>
                  <ul>
                     <li class="current"><a href="#hdr">Главная</a></li>
                     <li><a href="#content">Наши услуги</a></li>
                     <li><a href="#container12">Наши принципы</a></li>
                     <li><a href="#">Пункт меню</a>
                     </li>
                     <li><a href="#">Пункт меню</a></li>
                  </ul>
                  <div style="clear: both"></div>
               </div>
<script>

elements=document.querySelector("#webwidget_menu_glide3")
 .querySelector("ul")
 .querySelectorAll("li")

chng=function(){
   for(var i = 0; i<elements.length; i++){
      elements[i].className=""
   }
   this.className="current"      
}
;[].forEach.call(elements, function(el){el.onclick=chng})

</script>
</body>
 
</html>

ruslan_mart 21.01.2015 17:08

var prevCurrent;

document.querySelector('#webwidget_menu_glide3').onclick = function(e) {
    var selfParent = (e.target || window.event.srcElement).parentNode;
    if(selfParent.tagName == 'LI') {
        if(prevCurrent) prevCurrent.className = '';
        selfParent.className = 'current';
        prevCurrent = selfParent;
    }
};

Dryn9 21.01.2015 17:12

Вложений: 1
Не работает для моего меню. У меня jquery меню. Прикрепил в описании. Я хочу чтобы при щелчке на меню ползунок оставался там, а не переходил к пункту с классом current.

рони 21.01.2015 17:40

Цитата:

Сообщение от Dryn9
Прикрепил в описании. Я хочу чтобы при щелчке на меню ползунок оставался там, а не переходил к пункту с классом current.

а ещё проще можно ?

рони 21.01.2015 18:18

Меню с плавающей подсветкой пунктов
 
:write: рони, обьясняю тебе по простому: нужно чтоб при клике подсветка закреплялась за новым пунктом на который нажали ...
:-? ну так бы и сказали ... это в плагин надо лезть чего-то там менять ...
... тихо шифером шурша, крыша едет не спеша :cray: :lol: или тихо сам с собою я веду беседу ...
<!DOCTYPE HTML>
<html>
<head>

    <title>Demo</title>
    <meta charset="utf-8">
    <style type="text/css">
      .webwidget_menu_glide{
    padding: 5px;
    border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
    width: 100px;
    height: 20px;
    background-color: fuchsia;
    position: absolute;
    border-radius:10px;
}
.webwidget_menu_glide ul{
    padding: 0px;
    margin: 0px;
    font-family:Arial;
}
.webwidget_menu_glide ul li{
    float: left;
    list-style: none;
    position: relative;
    text-align: center;
    margin-right: 10px;
    width: 100px;
}
.webwidget_menu_glide ul li a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.webwidget_menu_glide ul li ul{
    border-radius:7px;
    padding-bottom: 5px;
    position: absolute;
    z-index: 999999;
    display: none;
}
.webwidget_menu_glide ul li ul li{
    border-radius:0px;
    margin: 0px;
    float: none;
    border:none;
    word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal;
}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
    <script>
        (function(a) {
            a.fn.webwidget_menu_glide = function(p) {
                var p = p || {};

                var f = p && p.menu_text_size ? p.menu_text_size : "12px";
                var g = p && p.menu_text_color ? p.menu_text_color : "blue";
                var h = p && p.menu_margin ? p.menu_margin : "10px";
                var i = p && p.menu_width ? p.menu_width : "100px";
                var j = p && p.menu_height ? p.menu_height : "20px";
                var k = p && p.menu_sprite_color ? p.menu_sprite_color : "red";
                var l = p && p.menu_background_color ? p.menu_background_color : "black";
                var m = p && p.sprite_speed ? p.sprite_speed : "fast";
                f += "px";
                h += "px";
                i += "px";
                j += "px";
                var n = a(this);
                if (n.children("ul").length == 0 || n.find("li").length == 0) {
                    n.append("Require menu content");
                    return null
                }
                s_m(n.children("ul").children("li"), h, i, j);
                s_m_t_c(n.find("a"), g, j, f);
                n.css("background-color", l);
                if (n.children("ul").children("li").is(".current")) {
                    var o = n.children("ul").children("li").filter(".current").offset()
                } else {
                    var o = n.children("ul").children("li:first").offset()
                }
                var q = o.left + 'px';
                n.children("ul").children("li").click(function(event) {
                    event.preventDefault();
                    n.children("ul").children("li").removeClass('current');
                    $(this).addClass('current');
                    q = $(this).offset().left + 'px'
                })
                s_m_s_c(n.find(".webwidget_menu_glide_sprite"), k, i, j, q);
                n.children("ul").children("li").hover(function() {
                    var b = $(this).offset();
                    var c = b.left + 'px';
                    n.find(".webwidget_menu_glide_sprite").stop().animate({
                        left: c
                    }, m)
                }, function() {
                    n.find(".webwidget_menu_glide_sprite").stop().animate({
                        left: q
                    }, m)
                });
                n.children("ul").children("li").children("ul").children("li").hover(function() {}, function() {});

                function s_m_t_c(a, b, c, d) {
                    a.css("color", b);
                    a.css("line-height", c);
                    a.css("font-size", d)
                }

                function s_m(a, b, c, d) {
                    style = "margin-right:" + b + "; width: " + c + "; height: " + d + ";";
                    a.attr("style", style)
                }

                function s_m_s_c(a, b, c, d, e) {
                    a.css("background-color", b);
                    a.css("width", c);
                    a.css("height", d);
                    a.css("left", e)
                }
            }
        })(jQuery);
    </script>
</head>

<body>
    <table width="600">
        <tr>
            <td>
                <h2>Demo1</h2>
                <br/>
                <br/>
                <script language="javascript" type="text/javascript">
                    $(function() {
                        $("#webwidget_menu_glide1").webwidget_menu_glide({
                            menu_width: "100",
                            menu_height: "30",
                            menu_text_size: "15",
                            menu_text_color: "#FFF",
                            menu_sprite_color: "red",
                            menu_background_color: "#C91A3E",
                            menu_margin: "5",
                            sprite_speed: "normal",
                            container: "webwidget_menu_glide1"
                        });
                    });
                </script>
                <div id="webwidget_menu_glide1" class="webwidget_menu_glide">
                    <div class="webwidget_menu_glide_sprite"></div>
                    <ul>
                        <li><a href="#">Home</a>
                        </li>

                        <li><a href="#">News</a>
                        </li>
                        <li class="current"><a href="#">About</a>
                        </li>
                        <li><a href="#">Contact</a>
                        </li>

                        <li><a href="#">More...</a>
                        </li>
                    </ul>
                    <div style="clear: both"></div>

                </div>
            </td>
        </tr>
        <tr>
            <td>
                <h2>Demo2</h2>
                <br/>
                <br/>
                <script language="javascript" type="text/javascript">
                    $(function() {
                        $("#webwidget_menu_glide2").webwidget_menu_glide({
                            menu_width: "100",
                            menu_height: "30",
                            menu_text_size: "15",
                            menu_text_color: "#CCC",
                            menu_sprite_color: "#666",
                            menu_background_color: "#000",
                            menu_margin: "5",
                            sprite_speed: "normal",
                            container: "webwidget_menu_glide2"
                        });
                    });
                </script>
                <div id="webwidget_menu_glide2" class="webwidget_menu_glide">
                    <div class="webwidget_menu_glide_sprite"></div>
                    <ul>
                        <li><a href="#">Home</a>
                        </li>

                        <li><a href="#">News</a>
                        </li>
                        <li class="current"><a href="#">About</a>
                        </li>
                        <li><a href="#">Contact</a>
                        </li>

                        <li><a href="#">More...</a>
                        </li>
                    </ul>
                    <div style="clear: both"></div>

                </div>
            </td>
        </tr>
        <tr>
            <td>
                <h2>Demo3</h2>
                <br/>
                <br/>
                <script language="javascript" type="text/javascript">
                    $(function() {
                        $("#webwidget_menu_glide3").webwidget_menu_glide({
                            menu_width: "100",
                            menu_height: "23",
                            menu_text_size: "12",
                            menu_text_color: "#FFF",
                            menu_sprite_color: "#86C7EF",
                            menu_background_color: "#0F67A1",
                            menu_margin: "2",
                            sprite_speed: "normal",
                            container: "webwidget_menu_glide3"
                        });
                    });
                </script>
                <div id="webwidget_menu_glide3" class="webwidget_menu_glide">
                    <div class="webwidget_menu_glide_sprite"></div>
                    <ul>
                        <li><a href="#">Home</a>
                        </li>

                        <li><a href="#">News</a>
                        </li>
                        <li class="current"><a href="#">About</a>
                        </li>
                        <li><a href="#">Contact</a>
                        </li>

                        <li><a href="#">More...</a>
                        </li>
                    </ul>
                    <div style="clear: both"></div>

                </div>
            </td>
        </tr>
    </table>
</body>

</html>

ruslan_mart 21.01.2015 18:29

Цитата:

Сообщение от рони
109
                function s_m_t_c(a, b, c, d) {
110
                    a.css("col or", b);
111
                    a.css("lin e-height", c);
112
                    a.css("fon t-size", d)
113
                }
114
 
115
                function s_m(a, b, c, d) {
116
                    style = "margin-right:" + b + "; width: " + c + "; height: " + d + ";";
117
                    a.attr("st yle", style)
118
                }
119
 
120
                function s_m_s_c(a, b, c, d, e) {
121
                    a.css("bac kground-color", b);
122
                    a.css("wid th", c);
123
                    a.css("hei ght", d);
124
                    a.css("lef t", e)
125
                }

Жёсткий говнокодинг, по колено в коде. :)

рони 21.01.2015 18:48

Ruslan_xDD,
мы его слепило из того что было ))) 107 строка например совсем не причём -- код примерно 4 летней давности -- jquery 1.3.2 --можно сократить и расширить и прочее - было бы желание :)

Dryn9 23.01.2015 13:19

Работает только для ссылок вида #.
У меня же вот так:
<li><a href="#hdr">Главная</a></li>
                     <li><a href="#content">Наши услуги</a></li>
                     <li><a href="#container12">Наши принципы</a></li>
                     <li><a href="#">Пункт меню</a></li>
                     <li><a href="#">Пункт меню</a></li>

Эти ссылки для того, чтобы при нажатии на пункт экран скроллился до специального элемента.
Вот код скроллинга
<script type="text/javascript">
		$(document).ready(function () 
		{    
			$("a").click(function () 
			{        
				var elementClick = $(this).attr("href");        
				var destination = $(elementClick).offset().top - 100;        
				if ($.browser.safari) 
				{            
					$('body').animate({ scrollTop: destination }, 1100); //1100 - скорость прокрутки        
				} 
				else 
				{            
					$('html').animate({ scrollTop: destination }, 1100);        
				}        
			return false;     
			}
			);
		});
      </script>


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