Подсвечивание активного сейчас пункта меню
День добрый.
Есть вот такая разметка Код:
<html>Как сделать так, чтобы пункт меню подсвечивался, когда показывается соответствующий ему див с контентом. То есть если показывается Код:
<div class="content" id="2"...Код:
<a class="os-setting-link" href="javascript:void(0)" onClick="onoff(2);"><li class="os-settings-li">Пункт 2</li></a>И чтобы выделен был только соответствующий показываемому диву с контентом пункт? |
dpts,
странная вёрстка без ul и обычно ссылка в li а не на оборот... если поискать открывашка будет с десяток вариантов того что вы хотите ... |
Открывашка 241 меню с подсветкой активного пункта
dpts,
center font эти теги тоже бы выкинуть ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ru">
<title>test</title>
<style>
body{
font-family: Verdana, Geneva, sans-serif;
}
.one-section{
display: inline-block;
position: relative;
margin: 10px;
margin-top: 20px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
background: none;
color: #000000;
border: 1px dotted #3366FF;
border-radius: 3px;
-webkit-border-radius: 3px;
width: 94%;
height: auto;
}
.os-head{
color: #3366FF;
line-height: 20px;
background: white;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
font-weight: bold;
position: relative;
left: -10px;
top:-22px;
display: inline;
width: content;
z-index: 100;
}
.os-content{
background: none;
border: 0px none;
position: relative;
display: block;
top: -10px;
height: auto;
}
.os-section-name{
width: auto;
line-height: 40px;
font-weight: bold;
letter-spacing: 1px;
color: #3366FF;
font-size: 18px;
margin: 0px 20px;
padding: 0px;
display: inline;
}
.os-setting-link{
color: #3366FF;
text-decoration: none;
}
.os-settings-li {
text-decoration: none;
line-height: 30px;
background: #ffffff;
list-style-type: none;
text-transform: capitalize;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 5px;
padding-left: 10px;
font-size: 14px;
font-weight: bold;
border-left: 4px solid rgba(102,0,255,0.05);
}
.os-settings-li:hover {
background: rgba(153, 204, 255, 0.1);
text-transform: Uppercase;
font-weight: bold;
}
.maintbl{
width: 100%;
border-collapse: collapse;
border: 0px none;
}
.tdleft{
width: 20%;
height: 100%;
border-left: 0px none;
border-top: 0px none;
border-right: 1px dotted black;
border-bottom: 0px none;
}
.tdright{
width: 80%;
height: 100%;
border: 0px none;
}
.content{
display: none;
background: none;
width: 98%;
height: 98%;
}
.os-settings-li.show{
background-color: #FFA500;
}
.content.show{
display: block;
padding-left:7px;
padding-top:10px;
width: 98%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
el.classList.toggle('show')
div[i].classList.toggle('show')
});
});
});
</script>
</head>
<body>
<table class="maintbl">
<tr>
<td class="tdleft">
<ul>
<li class="os-settings-li">Пункт 1</li>
<li class="os-settings-li">Пункт 2</li>
<li class="os-settings-li">Пункт 3</li>
<li class="os-settings-li">Пункт 4</li>
</ul>
</td>
<td class="right">
<div class="content" id="1" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 1</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="2" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 2</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="3" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 3</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="4" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 4</font></h2></strong></center><br>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
|
Благодарю.
Все отлично работает. |
В продолжение
А как сделать так, чтобы если вызов страницы происходит с параметром сразу показывался соответствующий раздел.
То-есть допустим, если страница вызывается: 1. settings.htm?view=1 - то сразу показывается <div class="content" id="1" style=" "> 2. settings.htm?view=2 - то сразу показывается <div class="content" id="2" style=" "> и т.д. Если никакого параметра view не передано, - то автоматом показывается <div class="content" id="1" style=" "> и выделяется соответствующий пункт <li class="os-settings-li">? |
dpts, парсить
window.location.search и ставить условие в строку 134 if(тра-та-та) el.classList.toggle('show') |
Цитата:
Значение параметра считывается VBS-ом и вполне нормально может быть передано в js. То есть js-ом надо только показать определенный div и подсветить соответствующий ему li. |
getParameterByName поиск параметров в location.search
dpts,
http://stackoverflow.com/questions/9...-in-javascript
window.addEventListener('DOMContentLoaded', function() {
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var view = +getParameterByName('view')||1,
li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
el.classList.toggle('show')
div[i].classList.toggle('show')
});
});
li[--view].click()
});
|
Почти работает
window.addEventListener('DOMContentLoaded', function() {
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var view = +getParameterByName('view')||1,
li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
el.classList.toggle('show')
div[i].classList.toggle('show')
});
});
li[--view].click()
document.getElementById(view+1).style.display='block'
});
Действительно при загрузке показывает соответствующий див и подсвечивает соответствующий ли. Но теперь при клике на ЛИ не показывает соответствующий див, не снимает подсветку с ЛИ. Не было проблемы получить значение из адресной строки, она без проблем берется vbs-ом и условие про есть она или нет проверяется vbs-ом на выходе из vbs-а имеем переменную содержащую цифру 1, 2, 3...n. Эту переменную я могу скормить javascript-у. Проблема показать при загрузке соответствующий див+подсветить соответствующий ли+чтобы "переключатель" в предыдущем варианте скрипта продолжал работать. |
dpts,
зачем строка 23? |
А без нее не показывает див - только li подсвечивает.
и при кликах по li - дивы не показывает и подсветку не снимает |
dpts,
смотрите css и html в 3 посте. |
Цитата:
|
я дибил.
Нашел. Заработало. |
А как сделать, что бы при загрузке странице обработчик click, вызвался и установил в дефолтное положение ?
Дело в том, что по кнопкам у меня: 1) Активизирую input, выбранного меню (см ниже) 2) отправляется get запрос, на получение параметров.(еще не сделал так как застрял на дефолте)
window.addEventListener('DOMContentLoaded', function() {
var li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
//------------------------------
el.classList.toggle('show')
if(div[i].classList=="content"){
div[i].classList.toggle('show');
}
//------------------------------
var jsonList_all = document.querySelectorAll('.JSON'); //все элементы с json и даже c ACT!!!
var jsonList_act = div[i].querySelectorAll('.JSON'); //все элементы внутри div
//------------------------------
//------Выключить JSON----------
//------------------------------
//------------------------------
for(var k = 0; k < jsonList_all.length; k++){
jsonList_all[k].classList.remove('act');
}
//------------------------------
for(var k = 0; k < jsonList_act.length; k++){
if(jsonList_act[k].classList=="JSON"){
jsonList_act[k].classList.toggle('act');
}
}
//------------------------------
<!-- console.log(jsonList_all); -->
<!-- console.log(jsonList_act); -->
//------------------------------
});
});
});
Цитата:
|
Цитата:
!i && el.click() }); бред какой-то Цитата:
if(jsonList_act[k].classList.contains("JSON")){
на крайний случай if(jsonList_act[k].className=="JSON") |
| Часовой пояс GMT +3, время: 04:01. |