Показать сообщение отдельно
  #29 (permalink)  
Старый 28.09.2016, 19:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Nekitok,
<!DOCTYPE html>
<html>
<head>
  <title></title>
<meta charset="utf-8">
<style>
#text {
    padding: 5px 0px 5px 0px;
 	margin: 20px 0px;
}


.qwer {
color: #232323;
font-size: 10pt;
border: solid 1px #999;
margin: 15px;
padding: 10px 30px;

}

#text a:hover {
background-color: #ff830a;
}

#text a:active, #text a.active {
  background: yellow;
}

.item{
  display: none;
}

.item.active {
   display: block;
}

</style>
<script type="text/javascript">
var _click = function () {
        var b = 1;
        return function (c) {
            var a = document.getElementById("item" + b), k = document.querySelector(".qwer:nth-child("+b+")");
            c == b && (a.classList.toggle("active"),k.classList.toggle("active"));
            c != b && (a.classList.remove("active"),
            k.classList.remove("active"),
            a = document.getElementById("item" + c),
            a.classList.add("active"),
            k = document.querySelector(".qwer:nth-child("+c+")"),
            k.classList.add("active"),
            b = c)
        }
    }();
window.onload = function() {
    _click(1)
 }
</script>
</head>

<body>
<div id="text">
<a onclick="_click(1); return false;" href="" class="qwer">ОПИСАНИЕ</a>
<a onclick="_click(2); return false;" href="" class="qwer">ХАРАКТЕРИСТИКИ</a>
<a onclick="_click(3); return false;" href="" class="qwer">ЗАМЕР</a>
<a onclick="_click(4); return false;" href="" class="qwer">МОНТАЖ</a>
</div>


<div class="item" id="item1">div1</div>
<div class="item" id="item2">div2</div>
<div class="item" id="item3">div3</div>
<div class="item" id="item4">div4</div>

</body>
</html>
Ответить с цитированием