Форум

AlexPh · #1 (**permalink**) 03.12.2012, 17:18

Есть страница на которой расположено 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>

Hekumok · #2 (**permalink**) 03.12.2012, 20:24

так?

<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_ · #3 (**permalink**) 03.12.2012, 22:42

http://api.jquery.com/attribute-starts-with-selector/

Hekumok · #4 (**permalink**) 03.12.2012, 23:28

nerv_, спс

____________________________________
Подправил пред. пост

Форум

Справочник

Discord чат

Курсы javascript