Изменить класс 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 с пункта "Главное". Как это можно сделать? |
Прочитай про className и classList. Что-то из них тебе должно подойти.
|
<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>
|
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;
}
};
|
Вложений: 1
Не работает для моего меню. У меня jquery меню. Прикрепил в описании. Я хочу чтобы при щелчке на меню ползунок оставался там, а не переходил к пункту с классом current.
|
Цитата:
|
Меню с плавающей подсветкой пунктов
: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_xDD,
мы его слепило из того что было ))) 107 строка например совсем не причём -- код примерно 4 летней давности -- jquery 1.3.2 --можно сократить и расширить и прочее - было бы желание :) |
Работает только для ссылок вида #.
У меня же вот так:
<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, время: 22:13. |