23.12.2015, 11:59
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Подсвечивание активного сейчас пункта меню
День добрый.
Есть вот такая разметка
|
Код:
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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{
background: none;
width: 98%;
height: 98%;
}
</style>
<script>
function onoff(num) {
max=50;
for(t=1;t<=max;t++) {
if (t==num) {
document.getElementById(t).style.display='';
}
else {
document.getElementById(t).style.display='none';
}
}
}
</script>
</head>
<body>
<table class="maintbl">
<tr>
<td class="tdleft">
<a class="os-setting-link" href="javascript:void(0)" onClick="onoff(1);"><li class="os-settings-li">Пункт 1</li></a>
<a class="os-setting-link" href="javascript:void(0)" onClick="onoff(2);"><li class="os-settings-li">Пункт 2</li></a>
<a class="os-setting-link" href="javascript:void(0)" onClick="onoff(3);"><li class="os-settings-li">Пункт 3</li></a>
<a class="os-setting-link" href="javascript:void(0)" onClick="onoff(4);"><li class="os-settings-li">Пункт 4</li></a>
</td>
<td class="right">
<div class="content" id="1" style="padding-left:7px;padding-top:10px;width: 98%; display: none;">
<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="padding-left:7px;padding-top:10px;width: 98%; display: none;">
<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="padding-left:7px;padding-top:10px;width: 98%; display: none;">
<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="padding-left:7px;padding-top:10px;width: 98%; display: none;">
<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> |
То есть в левой половине пункты меню, в правой дивы с содержимым по каждому пункту меню.
Как сделать так, чтобы пункт меню подсвечивался, когда показывается соответствующий ему див с контентом.
То есть если показывается
|
Код:
|
<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> |
было бы выделено фоном цветом, и так по каждому пункту.
И чтобы выделен был только соответствующий показываемому диву с контентом пункт?
|
|
23.12.2015, 12:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
dpts,
странная вёрстка без ul и обычно ссылка в li а не на оборот... если поискать открывашка будет с десяток вариантов того что вы хотите ...
|
|
23.12.2015, 12:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
Открывашка 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>
|
|
24.12.2015, 08:16
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Благодарю.
Все отлично работает.
|
|
09.01.2016, 10:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
В продолжение
А как сделать так, чтобы если вызов страницы происходит с параметром сразу показывался соответствующий раздел.
То-есть допустим, если страница вызывается:
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, 09.01.2016 в 10:52.
|
|
09.01.2016, 16:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
dpts, парсить
window.location.search и ставить условие в строку 134 if(тра-та-та) el.classList.toggle('show')
|
|
12.01.2016, 08:15
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
Сообщение от рони
|
dpts, парсить
window.location.search и ставить условие в строку 134 if(тра-та-та) el.classList.toggle('show')
|
Учитывая, что в JS я полнейший ноль, парсить window.location.search - "не ближний свет".
Значение параметра считывается VBS-ом и вполне нормально может быть передано в js.
То есть js-ом надо только показать определенный div и подсветить соответствующий ему li. |
|
12.01.2016, 08:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
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()
});
Последний раз редактировалось рони, 12.01.2016 в 08:47.
|
|
12.01.2016, 09:14
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Почти работает
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-у.
Проблема показать при загрузке соответствующий див+подсветить соответствующий ли+чтобы "переключатель" в предыдущем варианте скрипта продолжал работать.
|
|
12.01.2016, 09:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
dpts,
зачем строка 23?
|
|
|
|
