Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2015, 17:01
Интересующийся
Отправить личное сообщение для Dryn9 Посмотреть профиль Найти все сообщения от Dryn9
 
Регистрация: 21.01.2015
Сообщений: 12

Изменить класс 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 с пункта "Главное". Как это можно сделать?
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2015, 17:03
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Прочитай про className и classList. Что-то из них тебе должно подойти.
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2015, 17:40
Аспирант
Посмотреть профиль Найти все сообщения от losos100
 
Регистрация: 21.01.2015
Сообщений: 39

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2015, 18:08
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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;
    }
};
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2015, 18:12
Интересующийся
Отправить личное сообщение для Dryn9 Посмотреть профиль Найти все сообщения от Dryn9
 
Регистрация: 21.01.2015
Сообщений: 12

Не работает для моего меню. У меня jquery меню. Прикрепил в описании. Я хочу чтобы при щелчке на меню ползунок оставался там, а не переходил к пункту с классом current.
Вложения:
Тип файла: zip menu.zip (22.2 Кб, 4 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2015, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от Dryn9
Прикрепил в описании. Я хочу чтобы при щелчке на меню ползунок оставался там, а не переходил к пункту с классом current.
а ещё проще можно ?
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2015, 19:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Меню с плавающей подсветкой пунктов
рони, обьясняю тебе по простому: нужно чтоб при клике подсветка закреплялась за новым пунктом на который нажали ...
ну так бы и сказали ... это в плагин надо лезть чего-то там менять ...
... тихо шифером шурша, крыша едет не спеша или тихо сам с собою я веду беседу ...
<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 21.01.2015, 19:29
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Сообщение от рони
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
                }
Жёсткий говнокодинг, по колено в коде.
Ответить с цитированием
  #9 (permalink)  
Старый 21.01.2015, 19:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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

Последний раз редактировалось рони, 21.01.2015 в 19:52.
Ответить с цитированием
  #10 (permalink)  
Старый 23.01.2015, 14:19
Интересующийся
Отправить личное сообщение для Dryn9 Посмотреть профиль Найти все сообщения от Dryn9
 
Регистрация: 21.01.2015
Сообщений: 12

Работает только для ссылок вида #.
У меня же вот так:
<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
Задержка в при выборе меню bserg Элементы интерфейса 1 16.12.2013 11:36
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48
Пункти меню плавно збільшувалися при наведенні. Andry309 Javascript под браузер 3 16.05.2011 09:28