| autodromo |
15.04.2014 10:03 |
Пример с табами, как раз почти то, что я ищу, только я в js вообще не занимался, и в подключаемом jquery-ui совсем под свою задачу не смогу подпилить код. А задача очень похожа на те табы.
Задача: например есть 3 ссылки в ряд, но по умолчанию они "захлопнуты"(display:none).
1 - Нажатие на любую ссылку, делает активной ссылке highlight и "разворачивает" под ней информацию;
2- Повторный клик на активную захлопывает её, так же активную (текущую) ссылку должен захлопывать клик на любую другую ссылку и разворачивать в тот же момент содержание нажатой ссылки ну и естественно highlight уже у другой активной.
Пока я реализовал только закрытие/открытие по одной и той же ссылке, а вот как сделать подсветку активной и захлопывать ее еще и по нажатию другой ссылки для меня проблема. Может поможете?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
</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>
.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}
$("#1").click(function(){
$("#1-1").slideToggle("slow");
});
$("#2").click(function(){
$("#2-2").slideToggle("slow");
});
$("#3").click(function(){
$("#3-3").slideToggle("slow");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<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}
</style>
<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>
<script language="javascript">
$("#1").click(function(){
$("#1-1").slideToggle("slow");
});
$("#2").click(function(){
$("#2-2").slideToggle("slow");
});
$("#3").click(function(){
$("#3-3").slideToggle("slow");
});
</script>
</body>
</html>
|
