隐藏除活动之外的所有子 Divs...Javascript

Question

我试图建立一个网站，其中有一个绝对居中的 Div，其中包含内容。我希望内容根据侧面的几个可点击按钮进行更改。为了做到这一点，我认为最好的情况可能是创建同一个类和父级的多个子 div，并隐藏不相关的内容，只显示与单击的链接关联的内容。我能写出一百万

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

代码行。但是有没有更快更简单的方法来做到这一点？

Answer 1

给每个按钮一个包含相关DIV的ID的数据属性，例如

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

然后隐藏给定类的所有DIV，并显示选中的那个。

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

您也可以使用 jQuery UI 选项卡插件。

Answer 2

这里的 'hide' 是你想要隐藏的 div 的 id。

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

这里的'show'是你要显示的div的id。

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

不要忘记在页面的头部添加 jquery 库。

Answer 3

给按钮一个id 和相应的容器一个类似的id（通过连接一些字符串使其与按钮不同）。例如，我将按钮 id="red" 和相应的 div id="redD"。然后它会让你的 javascript 变得更短。

除了id，您还可以使用任何自定义属性。

这是一个有效的 sn-p。

$(".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>

Answer 4

这是一种使用数据属性进行过滤的方法。

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>

或者使用 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>

Answer 5

这只是另一种涉及最少 javascript 的方式。

我做了什么

我最初隐藏了所有 div 类为 .content 的元素（第一个 CSS 规则）。

然后，我将display:block 赋予了一个.content 元素，该元素是URL 的当前目标。例如，如果您的 url 看起来像 localhost/#content-1，那么 :target 元素就是 #content-1。

CSS 的其余部分只是稍微改变一下显示。你可以忽略它。

兼容性

根据Can I Use，基本上除了IE 8 之外的所有现代浏览器都支持:target 伪选择器。现在

在哪里使用

如果此页面是独立的并且您希望它是链接引用，我会使用它。我的意思是，如果我访问您的网页，点击侧面的某个链接，并希望能够将该内容链接给朋友，而无需告诉他们“在右侧点击‘内容 3’”

我可能不会使用的地方

1. 如果您使用 Angular 和 ngRoute，这可能不是一个好主意，因为 $routeProvider 可能会混淆（尚未测试，所以我不能说 100%）。
2. 如果有多个部分通过链接更新，这将不起作用，因为文档只能有一个 :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>