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

Question

我正在尝试建立一个网站，其中包含内容的绝对居中 Div。我希望内容根据侧面的几个可点击按钮进行更改。为此，我认为最好的情况可能是创建多个相同 class 和父级的子 div，并隐藏不相关的内容，只显示与单击的 link 关联的内容。我可以写出100万

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>

然后隐藏给定 class 的所有 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，您还可以使用任何自定义属性。

这是一个工作片段。

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

或者 hide/show 使用 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 最少。

我做了什么

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

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

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

兼容性

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

在哪里使用

如果此页面是 self-contained 而您希望它是 link 引用，我会使用它。我的意思是，如果我访问您的网页，单击侧面的一些 link，并希望能够 link 将那些内容分享给朋友而不必告诉他们“在右侧单击 'content 3'"

我可能不会使用的地方

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

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

Hide all Child Divs except active...Javascript

html

javascript

css

jquery

show-hide

我做了什么

兼容性

在哪里使用

我可能不会使用的地方