Как скрыть все DIV кроме заданного ID при клике?
Здравствуйте, на странице есть меню-фильтр из ссылок вида:
<a href="#nomer1">Фильтр1</a> <a href="#nomer2">Фильтр2</a> *Всего их 8 штук Под ними есть такие дивы: <div id="nomer1" >КОНТЕНТ</div> <div id="nomer1" >КОНТЕНТ</div> <div id="nomer2" >КОНТЕНТ</div> Вопрос: Как при клике по ссылке [#nomer1] скрыть [display:none] все дивы кроме [id="nomer1"] |
sibfox777,
на форуме поискать открыть закрыть 100500 тем
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $("[href^='#nomer']"), d = $("[id^='nomer']");
s.click(function(event) {
event.preventDefault();
d.addClass("hide");
$(this.hash).removeClass("hide");
});
});
</script>
</head>
<body>
<a href="#nomer1">Фильтр1</a>
<a href="#nomer2">Фильтр2</a>
<a href="#nomer3">Фильтр3</a>
<div id="nomer1" >КОНТЕНТ1</div>
<div id="nomer2" >КОНТЕНТ2</div>
<div id="nomer3" >КОНТЕНТ3</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:05. |