|
Сообщение от autodromo
|
|
Отредактировал.
|
всё же вам дали по ссылке - только своё вписать - и так
версия 100500 копипаст
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.pseudo-link {
text-decoration: none;
border-bottom: 1px dashed #999;
display:inline;
}
.hidden-text {
display: none;
padding-top: 10px;
font-size: .9em
}
.align {margin-left: 15px}
a.active:after {
content: "Моя нажата";
color: #006400;
background-color: #FFFACD;
font-size: 90%;
padding: 2px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
var $links = $(".links a"),
$divs = $(".links div");
$(".links").on("click", "a", function (event) {
event.preventDefault();
$links.not(this).removeClass("active");
$(this).toggleClass("active");
var indx = $links.index(this),
div = $divs.eq(indx);
div.slideToggle("slow");
$divs.not(div).slideUp("slow");
})
$(document).on("click", function (event) {
if ($(".links").has(event.target).length === 0) {$divs.slideUp("slow");$links.removeClass("active")}
});
})
</script>
</head>
<body>
<div class="links">
<a id="1" class="pseudo-link" href="#">link1</a>
<a class="pseudo-link align" href="#" id="2">link2</a>
<a class="pseudo-link align" href="#" id="3">link3</a>
<div id="1-1" class="hidden-text">Текст1</div>
<div id="2-2" class="hidden-text">Текст2</div>
<div id="3-3" class="hidden-text">Текст3</div>
</div>
</body>
</html>