All geek questions in one place

Hide all child divs except active ... Javascript

I am trying to create a website that has an absolute centered Div with the content in it. I want the content to change based on a few buttons with buttons on the side. To do this, I decided that the best option would be to create several child divs of the same class and parent and hide inappropriate content and only display the content associated with the clicked link. I can write out 1 million.

document.getElementById("ImAnId").onclick = function helpMePlease( {
    document.getElementById("ImAlsoAnId").style.display="none";
}

lines of code. but is there a faster way to do this?

+4
source share
5 answers

id id ( , ). , id="red" div id="redD". javascript .

id .

.

$(".links").click(function(){
  var divId = "#"+ $(this).attr("id") + "D";
  $(".divs").removeClass("active");
  $(divId).addClass("active");
});
.con{
  position:relative;
  width:100%;
  margin:0;
  height:150px;
}
.divs{
  position:absolute;
  width:100px;
  margin:0;
  bottom:0;
  left:0;
  border:1px solid black;
  height:100px;
  display:none;
}
.divs.active{
  display:block;
}
#redD{
    background-color:red;
}
#greenD{
    background-color:green;
}
#blueD{
    background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="con">
  <button class="links active" id="green">green</button>
  <button class="links" id="blue">blue</button>
  <button class="links" id="red">red</button>
  
  <div class="divs active" id="greenD"></div>
  <div class="divs" id="redD"></div>
  <div class="divs" id="blueD"></div>
</div>
Hide result
+2

, DIV,

<button class="link" data-div="ImAlsoAnId">Click me</button>

DIV .

$(".link").click(function() {
    $(".divclass").hide();
    $('#' + $(this).data("div")).show();
});

jQuery UI Tabs.

+2

'hide' - div, .

$("#hide").click(function(){
$("p").hide();
});

'show' - div, .

$("#show").click(function(){
$("p").show();
});

jQuery .

+1

.

var $things = $('.things div');

$('a').on('click',function(e) {
  e.preventDefault();
  var activeClass = $(this).attr('data-filter');
  $things.show().not('.' + activeClass).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-filter="a">a</a>
<a href="#" data-filter="b">b</a>
<a href="#" data-filter="c">c</a>
<a href="#" data-filter="d">d</a>

<div class="things">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>
Hide result

/ CSS ( ), -

var $things = $('.things div');

$('a').on('click',function(e) {
  e.preventDefault();
  var activeClass = $(this).attr('data-filter');
  $things.removeClass('hide').not('.' + activeClass).addClass('hide');
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-filter="a">a</a>
<a href="#" data-filter="b">b</a>
<a href="#" data-filter="c">c</a>
<a href="#" data-filter="d">d</a>

<div class="things">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>
Hide result
+1

javascript.

div .content ( CSS).

display:block .content, URL. , URL- localhost/#content-1, :target #content-1.

CSS , . .

, IE 8, :target psuedo.

, , , . , -, , " " 3 "

, ,

  • Angular ngRoute, , , , $routeProvider ( , 100%).
  • , , :target.

, Javascript , , .

.content {
  display: none;
}
.content:target {
  display: block;
}
/* The magic bits are above.*/

.content-link,
.content-link:visited {
  display: block;
  padding: 5px 10px;
  background: teal;
  color: #eee;
}
.content-link:hover {
  color: #fff;
}
.content-link + .content-link {
  margin-top: 10px;
}
.wrapper {
  display: flex;
}
.wrapper .sidebar {
  flex: 0 0 20%;
}
<div class="wrapper">
  <aside class="sidebar">
    <a href="#content-1" class="content-link">Content 1</a>
    <a href="#content-2" class="content-link">Content 2</a>
    <a href="#content-3" class="content-link">Content 3</a>
    <a href="#content-4" class="content-link">Content 4</a>
    <a href="#content-5" class="content-link">Content 5</a>
    <a href="#content-6" class="content-link">Content 6</a>
    <a href="#content-7" class="content-link">Content 7</a>
    <a href="#content-8" class="content-link">Content 8</a>
    <a href="#content-9" class="content-link">Content 9</a>
    <a href="#content-10" class="content-link">Content 10</a>
  </aside>
  <main class="main-content">
    <div class="content" id="content-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint incidunt voluptate veritatis harum perspiciatis voluptas natus laborum officiis dicta accusantium placeat expedita, nemo obcaecati a, fugit sequi provident adipisci deserunt!</div>
    <div class="content" id="content-2">Nihil reiciendis, excepturi eos, qui autem eveniet rerum delectus nemo officiis cupiditate architecto quibusdam necessitatibus facere sint nisi quam repudiandae, labore eaque harum non unde sunt eius nostrum. Minima, dolor.</div>
    <div class="content" id="content-3">Eaque facilis neque veritatis eligendi illo aliquid deserunt ut vitae eius laudantium hic, fugit architecto quasi omnis dicta, molestias itaque? Ipsa ratione laborum eum optio non nam! Ducimus, ex, repudiandae!</div>
    <div class="content" id="content-4">Esse perspiciatis, maiores tenetur quaerat, maxime asperiores assumenda eum dolore ab minus similique mollitia blanditiis sequi quas laboriosam dolores debitis impedit dicta, fugit laudantium molestiae sunt quia! Placeat, repellendus consectetur?</div>
    <div class="content" id="content-5">Animi et, ut corporis perferendis placeat ipsa sit iusto voluptatibus id eligendi, pariatur beatae. Velit ex, beatae aut. Beatae ipsam culpa quae! Pariatur veniam, atque sit soluta nam, dolores rerum.</div>
    <div class="content" id="content-6">Aut ipsa, fugit voluptas, incidunt asperiores, id cupiditate error reprehenderit quibusdam ut ea eligendi eos temporibus! Nobis vel aperiam rem neque harum nostrum corrupti, obcaecati ad facere alias, distinctio fugiat.</div>
    <div class="content" id="content-7">Architecto quisquam placeat ratione voluptas iure, incidunt laudantium nisi ut aliquid aperiam! Quidem doloremque veritatis voluptas voluptates blanditiis ea quia nesciunt culpa commodi iusto, recusandae quae quo laudantium fuga saepe.</div>
    <div class="content" id="content-8">Quam iste, accusantium placeat quidem ratione atque sit impedit cum quo quos aspernatur modi assumenda voluptas, ea cumque autem facilis odit. Culpa maxime labore porro dicta voluptatem reiciendis tenetur perspiciatis!</div>
    <div class="content" id="content-9">Nisi sequi doloribus quos cum alias recusandae quasi eaque fugit sed deleniti magni maiores tenetur minus labore consectetur, quisquam excepturi maxime eveniet iure amet accusamus asperiores tempore. Vitae, sint. Blanditiis.</div>
    <div class="content" id="content-10">Alias officiis, earum possimus iure. Non, dolores unde magni itaque sed numquam aliquam, vel laudantium ullam? Vitae molestiae deleniti pariatur praesentium culpa ratione necessitatibus nemo, ea suscipit, maxime, ipsa delectus.</div>
  </main>
</div>
Hide result
+1
source

Source: https://habr.com/ru/post/1666976/

More articles:


All Articles