jquery在没有硬编码的情况下显示/隐藏div的内容

我有3个div，里面有内容（图片）。当你点击其中一个内容时，它变得可见，另外两个内容变得隐藏。我已经设法通过jQuery代码来实现这一点（你可以在下面检查它），但是它是硬编码的坏事，还有其他方法可以吗？jquery在没有硬编码的情况下显示/隐藏div的内容

P.S .:“https://solomia-gera.github.io/”是网站本身，如果你想看看。

---------------------------------------------- - - - - - -代码 - - - - - - - - - - - - - - - - - - - ----------------

<!-- Hide/Show DIV1 content--> 
<script> 
// Hide content in div with id#mox when cliked on div with id#content 
    $("#mox2").on("click", function() { 
    $("#content1").hide(); 
    }); 
    $("#mox3").on("click", function() { 
    $("#content1").hide(); 
    }); 
// Show content in div with id#mox when cliked on div with id#content 
    $("#mox1").on("click", function() { 
    $("#content1").show(); 
    }); 
</script> 

<!-- Hide/Show DIV2 content--> 
<script> 
    $("#content2").hide(); 
// Hide content in div with id#mox when cliked on div with id#content 
    $("#mox1").on("click", function() { 
    $("#content2").hide(); 
    }); 
    $("#mox3").on("click", function() { 
    $("#content2").hide(); 
    }); 
// Show content in div with id#mox when cliked on div with id#content 
    $("#mox2").on("click", function() { 
    $("#content2").show(); 
    }); 
</script> 

<!-- Hide/Show DIV3 content--> 
<script> 
$("#content3").hide(); 
// Hide content in div with id#mox when cliked on div with id#content 
$("#mox2").on("click", function() { 
$("#content3").hide(); 
    }); 
$("#mox1").on("click", function() { 
$("#content3").hide(); 
}); 
    // Show content in div with id#mox when cliked on div with id#content 
$("#mox3").on("click", function() { 
$("#content3").show(); 
});

来源

2017-03-15 r.hrytskiv

考虑到三者有一个共同的类mox，如果你添加一个普通类content每个内容的divs你可以这样做：

$(".mox").click(function() { 
    $(this).children(".content").show(); 
    $(".mox").not(this).children(".content").hide(); 
}

说明：函数i只要你点击任何带有mox类的元素，就会调用它。 this选择器让你选择被点击的类的特定实例，children()选择任何子元素，当我们将选择器作为参数children()时，它选择与该选择器匹配的所有子元素。第二行的作用类似，另外还有not(this)，所以第二行的内容隐藏了与content类匹配的所有元素，并且是类mox中的任何元素的子元素，但是这是其中的一个。

编辑：如果由于某种原因，你不想一个共同的类分配给所有内容的div，下面的函数将工作是：

$(".mox").click(function() { 
    $(this).children("[id^=content]").show(); 
    $(".mox").not(this).children("[id^=content]").hide(); 
}

在这里，我用attributeStartsWith选择，read more here。

来源

2017-03-15 10:42:29

这个答案是伟大的，我已经实现你的方法在我的代码中，一切正常，但有一件事很烦人。出于某种原因，在页面加载时，我会在1/10秒左右看到div2和div3的内容，并且屏幕抖动非常糟糕。我只在Chrome上注意到这一点，Firefox运行良好。它可能是什么？ P.S .:我用代码更新了网站，以便您查看该错误。 –

@ r.hrytskiv只有在页面加载时才会隐藏div2和div3，这可能会导致类似的问题。由于页面上的脚本总是在页面加载时隐藏div2和div3，所以无论如何，您应该删除该脚本的部分内容（'$（“＃content2”）。hide（）; $（“＃content3”）。hide ）;'），而是向div2和div3添加'style =“display：none;”'，这样它们就不会在加载时显示。 –

太棒了！不再闪烁，谢谢你！ –

如果您的内容不在mox之内，则可以为每个元素应用相同的类并添加数据以仅显示您想要的内容。

$(".mox").on("click", function() { 
 
    var content = $(".content") 
 
    content.hide(); 
 
    content.eq($(this).attr("data-content")-1).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mox" data-content="1">Show one</div> 
 
<div class="mox" data-content="2">Show two</div> 
 
<div class="mox" data-content="3">Show three</div> 
 

 
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div> 
 
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div> 
 
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>

来源

2017-03-15 10:45:47

试试这个代码

$('.mox').on('click', function(){ 
 
     $('.image_list').hide(); 
 
     var $index = $('.mox').index(this); 
 
     $('.image_list').eq($index).show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="box"> 
 
     <div id="mox1" class="mox"> 
 
     <p class="hide"> 
 
     O<br>V<br>E<br>R<br>V<br>I<br>E<br>W 
 
     </p> 
 
      <div id="content1" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    <!-- ALBUMS --> 
 
     <div id="mox2" class="mox"> 
 
     <p class=""> 
 
     A<br>L<br>B<br>U<br>M<br>S 
 
     </p> 
 
      <div id="content2" class="image_list"> 
 
    <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    <!-- ABOUT --> 
 
     <div id="mox3" class="mox"> 
 
     <p class=""> 
 
     A<br>B<br>O<br>U<br>T 
 
     </p> 
 
      <div id="content3" class="image_list"> 
 
      <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    </div>

来源

2017-03-15 10:48:19

有这样做的您可以简单地使用下面的代码更好的方法

$('.content').on('click', '.img-heading', function(){ 
    $(this).parent('.content').siblings('.content').removeClass('active'); 
    $(this).parent('.content').addClass('active'); 
})

Codepen link

来源

2017-03-15 11:17:39 Abinthaha

发现这真的很有帮助。谢谢@Abinthaha –

基于您的代码：

function myCustomHide(contentIds, moxsIds){ 
 
\t contentIds.forEach(function(element, index) { 
 
\t \t index !== 0 ? $("#"+element).hide(): null; 
 
\t \t moxsIds.forEach(function(moxElem, moxIndex){ 
 
     if(index !== moxIndex){ 
 
     $("#"+moxElem).on("click", function(){ 
 
      $("#"+element).hide(); 
 
     }); 
 
     } 
 
\t }); 
 
    $("#"+moxsIds[index]).on("click", function(){ 
 
      $("#"+element).show(); 
 
    }); 
 
\t }); 
 
} 
 

 
var contentsIds = [ "content1", "content2", "content3"]; 
 
var moxsIds = [ "mox1", "mox2", "mox3"]; 
 

 
myCustomHide(contentsIds, moxsIds);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
     <div id="mox1"> 
 
      Overview 
 
     </div> 
 
     <div id="content1" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 

 
    <!-- ALBUMS --> 
 
     <div id="mox2"> 
 
     Albums 
 
     </div> 
 
     <div id="content2" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 
     
 

 
    <!-- ABOUT --> 
 
     <div id="mox3"> 
 
     About 
 
     </div> 
 
     <div id="content3" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 
     
 

 
    </div>

或检查捣鼓略有不同的HTML：https://jsfiddle.net/oy7vj7fq/2/

来源

2017-03-15 11:41:29 Edwin

jquery在没有硬编码的情况下显示/隐藏div的内容

回答

相关问题