Скрытие и отображение блоков с одинаковым классом по клику
Есть страница на которой расположено n блоков. У блоков может быть m классов. Также есть m+1 ссылки (кнопки) при нажатии на которые скрываются все блоки кроме тех у которых класс совпадает с классом ссылки (кнопки) дополнительная (+1-я) ссылка (кнопка) при нажатии должна открывать все скрытые блоки.
Подскажите как реализовать такой скрипт? Примерная структура: <a href="" onclick="" class="classAll">ссылка</a> <a href="" onclick="" class="class1">ссылка</a> <a href="" onclick="" class="class2">ссылка</a> <a href="" onclick="" class="class3">ссылка</a> <div class="class1">...</div> <div class="class2">...</div> <div class="class3">...</div> <div class="class2">...</div> <div class="class3">...</div> <div class="class2">...</div> |
так?
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
<span class="classAll">ссылка All</span><br>
<span class="class1">ссылка 1</span><br>
<span class="class2">ссылка 2</span><br>
<span class="class3">ссылка 3</span><br>
<div class="class1">...1</div><br>
<div class="class2">...2</div><br>
<div class="class3">...3</div><br>
<div class="class2">...2</div><br>
<div class="class3">...3</div><br>
<div class="class1">...1</div>
<script>
$("span[class ^= 'class']").not(".classAll").click(function() {
$("div[class ^= 'class']").not("."+$(this).attr("class")).hide() ;
}) ;
$(".classAll").click(function() {
$("div[class ^= 'class']").show() ;
}) ;
</script>
</body></html>
Или так?
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
<span class="classAll">ссылка All</span><br>
<span class="class1">ссылка 1</span><br>
<span class="class2">ссылка 2</span><br>
<span class="class3">ссылка 3</span><br>
<div class="class1">...1</div><br>
<div class="class2">...2</div><br>
<div class="class3">...3</div><br>
<div class="class2">...2</div><br>
<div class="class3">...3</div><br>
<div class="class1">...1</div>
<script>
$("span[class ^= 'class']").not(".classAll").click(function() {
$("div[class ^= 'class']").hide() ;
$("div."+$(this).attr("class")).show() ;
}) ;
$(".classAll").click(function() {
$("div[class ^= 'class']").show() ;
}) ;
</script>
</body></html>
|
|
nerv_, спс :)
____________________________________ Подправил пред. пост |
| Часовой пояс GMT +3, время: 02:15. |