День добрый.
Есть вот такая разметка
|
Код:
|
<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> |
было бы выделено фоном цветом, и так по каждому пункту.
И чтобы выделен был только соответствующий показываемому диву с контентом пункт?