显示一个Div并隐藏所有其他的简单方法？

Question

我正在寻找一种显示一个div并隐藏所有其他div的方法。默认情况下显示第一个。

我能够使用jQuery来实现这一点，但是代码很长，我觉得有一种更好/更优化的方式来解决这个问题。

以下是代码段：

$(".link-one").click(function() {
  $(".div-one").show();
  $(".div-two,.div-three,.div-four,.div-five").hide();
 
});
$(".link-two").click(function() {
  $(".div-two").show();
  $(".div-one,.div-three,.div-four,.div-five").hide();
});
$(".link-three").click(function() {
  $(".div-three").show();
  $(".div-one,.div-two,.div-four,.div-five").hide();
});
$(".link-four").click(function() {
  $(".div-four").show();
  $(".div-one,.div-two,.div-three,.div-five").hide();
});
$(".link-five").click(function() {
  $(".div-five").show();
  $(".div-one,.dive-two,.div-three,.div-four").hide();
});

.div-two,
.div-three,
.div-four,
.div-five {
  display: none
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">
  Div #1
</div>

<div class="div-two">
  Div #2
</div>

<div class="div-three">
  Div #3
</div>

<div class="div-four">
  Div #4
</div>

<div class="div-five">
  Div #5
</div>

这是一个JSfiddle，它应该有助于展示我的意思： https://jsfiddle.net/z58ayhtw/6/

Answer 1

使用通用类将两者定位。在链接上添加简单的数据属性可用于隔离相应的内容元素

$('.tab-link').click(function(){
   var contClass = $(this).data('div');
   $('.content').hide().filter('.' + contClass).show()
})

.content {
  display: none
}
.content:first-of-type {display:block}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="tab-link" data-div="div-one">Link One</a> 
<a href="#" class="tab-link" data-div="div-two">Link Two</a> 
<a href="#" class="tab-link" data-div="div-three">Link Three</a> 
<a href="#" class="tab-link" data-div="div-four">Link Four</a> 
<a href="#" class="tab-link" data-div="div-five">Link Five</a>

<div class="div-one content">
  Div #1
</div>

<div class="div-two  content">
  Div #2
</div>

<div class="div-three content">
  Div #3
</div>

<div class="div-four content">
  Div #4
</div>

<div class="div-five content">
  Div #5
</div>

Answer 2

当然有。

一种方法是捕获event.target并在循环遍历整个元素集时进行比较。您的比较方式可以是任何东西；一个类，可能是一个id，一个属性，一个索引。

我将使用本机JS进行此操作，但是转换为jQuery应该是小菜一碟。

window.onload = function(){
  const links = document.querySelectorAll('.link-item');
  const divs = document.querySelectorAll('.div-item');

  const hide = function(evt){
    divs.forEach(function(d){
       if(evt.target.getAttribute('itemNo') != d.getAttribute('itemNo')) d.classList.add('display-none');
       else d.classList.remove('display-none');
    });
  }

  links.forEach(function(d){ d.onclick = hide; })
}

.display-none{
   display: none;
}

<div class="link-item" itemNo="1">link 1</div>
<div class="link-item" itemNo="2">link 2</div>
<div class="link-item" itemNo="3">link 3</div>
<div class="link-item" itemNo="4">link 4</div>
<div class="link-item" itemNo="5">link 5</div>
<br/><br/>
<div class="div-item" itemNo="1">div 1</div>
<div class="div-item display-none" itemNo="2">div 2</div>
<div class="div-item display-none" itemNo="3">div 3</div>
<div class="div-item display-none" itemNo="4">div 4</div>
<div class="div-item display-none" itemNo="5">div 5</div>

Answer 3

添加CSS

<style>
    #divs>div{
        visibility: hidden;
    }
    #divs>div.visible{
        visibility: visible;
    }
</style>

然后将div的引用传递给click函数

<div id="divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<a href="javascript:showDiv(1)">Show 1</a>
<a href="javascript:showDiv(2)">Show 2</a>
<a href="javascript:showDiv(3)">Show 3</a>
<a href="javascript:showDiv(4)">Show 4</a>
<a href="javascript:showDiv(5)">Show 5</a>

这是Vanila JS

<script>

    function showDiv(n) {
        const divs = document.querySelectorAll("#divs>div")
        divs.forEach(d => {
            d.classList.remove("visible")
        })
        divs.item(n-1).classList.add("visible")
    }

</script>

Answer 4

您可以按照以下步骤进行操作：

• 在类以a开头的link个元素上添加click事件。为此，请使用Attribute Selectors。例如，$('a[class^=link]')将获得其类以<a>开头的所有link。
• 然后以link开头的元素的类
• 先隐藏所有div，然后显示所需的div。

$('a[class^=link]').click(function(e){
  let c = this.className.split(' ').find(x => x.startsWith('link'));      
  $('div[class^=div]').hide();   
  $(`.div-${c.split('-')[1]}`).show();
})

.div-two,.div-three,.div-four,.div-five {
  display:none
}

a {
  display:inline-block;
  margin-right:10px;
  padding:5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">
Div #1
</div>

<div class="div-two">
Div #2
</div>

<div class="div-three">
Div #3
</div>

<div class="div-four">
Div #4
</div>

<div class="div-five">
Div #5
</div>

注意：在这里使用其他课程对我来说没有意义。元素的类别应相同。并且ID应该为div-one,div-two...

Answer 5

您可以使用点击的锚元素的.index()以及.eq()和.not()，如下所示：

$('a[class^=link-]').click(function(){
  var pos = $(this).index() - 1;
  $('[class^=div-]').eq(pos).show();
  $('[class^=div-]').not(':eq('+pos+')').hide();
});

.div-two,.div-three,.div-four,.div-five {
  display:none
}

a {
  display:inline-block;
  margin-right:10px;
  padding:5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">Div #1</div>
<div class="div-two">Div #2</div>
<div class="div-three">Div #3</div>
<div class="div-four">Div #4</div>
<div class="div-five">Div #5</div>

Answer 6

您正在链接到页面上的项目。充分利用这一点，指定目标ID并设置指向该链接的href。这是一种更具语义的方法，可能会带来一些SEO好处。

我进行的另一项更改是将内容divs封装在一个容器中，并根据其样式设置

$('.tab-link').click(function() {
  //Get our target from the link
  var contTarget = $(this).attr('href');
  //Hide all content
  $('.content > div').hide();
  //Show the target
  $(contTarget).show();
})

.content>div {
  display: none
}

.content>div:first-child {
  display: block
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#div-one" class="tab-link">Link One</a>
<a href="#div-two" class="tab-link">Link Two</a>
<a href="#div-three" class="tab-link">Link Three</a>
<a href="#div-four" class="tab-link">Link Four</a>
<a href="#div-five" class="tab-link">Link Five</a>

<div class="content">
  <div id="div-one">
    Div #1
  </div>

  <div id="div-two">
    Div #2
  </div>

  <div id="div-three">
    Div #3
  </div>

  <div id="div-four">
    Div #4
  </div>

  <div id="div-five">
    Div #5
  </div>
</div>

使用纯CSS 也可以做到这一点，但几乎没有JavaScript选项那么普遍。当内容区域为已知大小时，效果最佳。

有关此操作的大致概述如下。

.content { position: relative;}

.content>div {
  display: none;
  position:absolute;
  background-color:#FFF;
  z-index:10;
}

.content>div:first-child {
  display: block;
  z-index:1;
}

.content > div:target {
  display:block;
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#div-one" class="tab-link">Link One</a>
<a href="#div-two" class="tab-link">Link Two</a>
<a href="#div-three" class="tab-link">Link Three</a>
<a href="#div-four" class="tab-link">Link Four</a>
<a href="#div-five" class="tab-link">Link Five</a>

<div class="content">
  <div id="div-one">
    Div #1
  </div>

  <div id="div-two">
    Div #2
  </div>

  <div id="div-three">
    Div #3
  </div>

  <div id="div-four">
    Div #4
  </div>

  <div id="div-five">
    Div #5
  </div>
</div>

Answer 7

jQuery版本

添加此CSS

<style>
    #divs>div{
        display: none;
    }
</style>

为您构建html

<div id="divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<div id="links">
    <a href="#">Show 1</a>
    <a href="#">Show 2</a>
    <a href="#">Show 3</a>
    <a href="#">Show 4</a>
    <a href="#">Show 5</a>
</div>

最后是js

<script>
    const $links = $("#links>a");
    const $divs = $("#divs>div");

    $links.on("click", function(){
        const i = $links.index(this)
        $divs.hide()
        $($divs[i]).show()
    })
</script>