我做了什么

Question

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

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

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

您还可以使用jQuery UI Tabs插件。

Answer 2

给按钮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 3

在这里＆＃39;隐藏＆＃39;是要隐藏的div的id。

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

在这里＆＃39;显示＆＃39;是你想要展示的div的id。

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

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

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类（第一个CSS规则）隐藏了所有.content个元素。

然后我将display:block提供给作为当前网址目标的.content元素。例如，如果您的网址看起来像localhost/#content-1，那么:target元素就是#content-1。

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

兼容性

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

何处使用

如果此页面是自包含的并且您希望它是链接引用，我会使用此方法。我的意思是，如果我转到您的网页，点击侧面的某个链接，并希望能够将该内容链接到朋友，而无需告诉他们“在右侧点击'内容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>

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

5 个答案:

我做了什么

兼容性

何处使用

我可能不会使用