隱藏除活動之外的所有Child Div ... 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，並顯示所選的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

這里'hide'是你要隱藏的div的id。

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

這里'show'是你想要展示的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的另一種方式。

我做了什么

我最初用.content類（第一個CSS規則）隱藏了所有div元素。

然后我給出了display:block到.content元素，它是URL的當前目標。 例如，如果您的網址看起來像localhost/#content-1那么:target元素是#content-1 。

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

兼容性

根據我可以使用基本上每個現代瀏覽器保存為IE 8支持:target psuedo選擇器。 現在

在哪里使用

如果此頁面是自包含的並且您希望它是鏈接引用，我會使用此方法。 我的意思是，如果我轉到您的網頁，點擊側面的某個鏈接，並希望能夠將該內容鏈接到朋友，而無需告訴他們“在右側點擊'內容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>