jquery显示/隐藏div中没有​​硬编码的内容

时间:2017-03-15 10:35:54

标签: javascript jquery html css

我有3个div,里面有内容(图片)。当您单击其中一个时,其内容将变为可见,其他两个内容将变为隐藏状态。我已经设法通过jquery代码实现了这一点(你可以在下面检查它),但是它硬编码的坏事,是否还有其他方法可以做到这一点?

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();
 });

5 个答案:

答案 0 :(得分:2)

鉴于所有三个都有一个共同的类mox,如果你为每个内容div添加一个公共类content,你可以这样做:

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

说明:每当您单击具有mox类的任何元素时,都会调用该函数。 this选择器允许您选择被单击的类的特定实例,children()选择任何子元素,当我们将选择器作为children()的参数时,它选择所有子元素匹配那个选择器。第二行的工作方式类似,添加了not(this),因此第二行读取隐藏了与content类匹配的所有元素,并且是具有类mox的任何元素的子元素,但是这一行。< / p>

编辑:如果由于某种原因您不想为所有内容div分配公共类,则以下函数将按原样运行:

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

我在这里使用了attributeStartsWith选择器,read more here

答案 1 :(得分:1)

有更好的方法可以做到这一点 您只需使用以下代码

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

Codepen link

答案 2 :(得分:0)

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

&#13;
&#13;
$(".mox").on("click", function () {
  var content = $(".content")
  content.hide();
  content.eq($(this).attr("data-content")-1).show();
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

试试这段代码

&#13;
&#13;
    $('.mox').on('click', function(){
      $('.image_list').hide();
      var $index  = $('.mox').index(this);
      $('.image_list').eq($index).show();
    });
&#13;
    <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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

根据您的代码:

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

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

myCustomHide(contentsIds, moxsIds);
&#13;
<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>
&#13;
&#13;
&#13;

或检查小提琴是否有轻微不同的html:https://jsfiddle.net/oy7vj7fq/2/