Question

我有两个锚点标签，点击时都会显示两个不同的div，但我只想一次显示一个div。我还想隐藏在其外部单击时显示的div。我差不多完成了，但是当我点击第一个锚点然后在第二个锚点上显示两个div时（我想一次一个）。

这是我的代码：

＆＃13;

//Display and hide div number 1

$("a.number_1").on("click", function(event) {
  event.preventDefault();
  $(".display_div_1").toggle();
  event.stopPropagation();
});

$(".display_div_1").on("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
});

$(".body").on("click", function(event) {
  event.preventDefault();
  $(".display_div_1").hide();
});

//Display and hide div number 2

$("a.number_2").on("click", function(event) {
  event.preventDefault();
  $(".display_div_2").toggle();
  event.stopPropagation();
});

$(".display_div_2").on("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
});

$(".body").on("click", function(event) {
  event.preventDefault();
  $(".display_div_2").hide();
});

＆＃13;

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_div_1 {
  display: none;
}

div.display_div_2 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <ul>
    <li>
      <a href="" method="POST" class="display number_1">Display div 1</a>
    </li>
    <li>
      <a href="" method="POST" class="display number_2">Display div 2</a>
    </li>
  </ul>
  <div id="first" class="display display_div_1">
    This is div 1!
  </div>
  <div id="second" class="display display_div_2">
    This is div 2!
  </div>


</div>

＆＃13;

我的jquery代码取自帖子的第一个答案：this answer

谢谢！

Answer 1

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='div1' class="number">Display div 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='div2' class="number">Display div 2</a>
    </li>
  </ul>
  <div id="1" class="display display_div_1">
    This is div 1!
  </div>
  <div id="2" class="display display_div_2">
    This is div 2!
  </div>

</div>
</body>

使用脚本

$( document ).ready(function() {
    $('.number').click(function() {
      $('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
      $('.body').show();
      $('.number').show();
      $('#' + this.id.substring(3)).show(); //show just the div you want to show
    });
});

Answer 2

在这篇文章中找到答案：Use jQuery to hide a DIV when the user clicks outside of it

	$('a#div1').click(function() {
  	$("div#1").show();
  });
  $('a#div2').click(function() {
  	$("div#2").show();
  });
   $('a#div3').click(function() {
  	$("div#3").show();
  });

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('.display_div_1'));
    container.push($('.display_div_2'));
    container.push($('.display_div_3'));
    
    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_div_1 {
  display: none;
}

div.display_div_2 {
  display: none;
}

div.display_div_3 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 100px;
  height: 100px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='div1' class="number">Display div 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='div2' class="number">Display div 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='div3' class="number">Display div 3</a>
    </li>
  </ul>
  <div id="1" class="display display_div_1">
    This is div 1!
  </div>
  <div id="2" class="display display_div_2">
    This is div 2!
  </div>
  <div id="3" class="display display_div_3">
    This is div 3!
  </div>

</div>
</body>

单击锚点时添加div并在单击其外部或不同锚点时删除div

2 个答案: