Question

我搜索了一种在点击图片后显示DIV内容的方法。我在JSFiddle上发现了一个解决方案here。

现在我试图让它适用于3个DIV。这就是我如何做到的：

＆＃13;

<script>
	$("#lol_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#lol_team").toggle();
});
</script>
<script>
	$("#csgo_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#csgo_team").toggle();
});
</script>
<script>
	$("#cod_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#cod_team").toggle();
});
</script>

＆＃13;

<!-- first team -->

<a href="#"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>	<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

＆＃13;

当我点击第一/第二/第三个div时，所有这些都将打开/关闭。我需要更改哪些内容才能逐个打开/关闭？

Answer 1

致电$("a").on("click")会将点击事件附加到页面上的所有<a>。您只需要一个锚点来实现一个div，因此您应该将ID附加到所有div，并添加事件以在之后切换它们。请参阅以下更新的代码：

$("#lol_team").hide();
$("#lol_team_anchor").on("click", function(e){
  e.preventDefault();
  $("#lol_team").toggle();
});
$("#csgo_team").hide();
$("#csgo_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#csgo_team").toggle();
});
$("#cod_team").hide();
$("#cod_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#cod_team").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" id="csgo_team_anchor"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>	<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" id="lol_team_anchor"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" id="cod_team_anchor"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

理想情况下，您可以将其简化为以下内容：

//Hide all divs with class of 'toggleContainer' by default:
$('div.toggleContainer').hide();

//Attach a click event to all anchors with class of 'toggle'
$('a.toggle').on('click', function(e) {
  //Ignore the click (Prevent it from trying to load whatever is in 'href'. If it's '#' (This will prevent the page from going to the top)
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});

//Hide all toggleContainers by default:
$('div.toggleContainer').hide();

$('a.toggle').on('click', function(e) {
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" class="toggle"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>
<div class="toggleContainer">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" class="toggle"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div class="toggleContainer">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" class="toggle"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div class="toggleContainer">
  <h2>Call of Duty Team Lineup:</h2>
</div>

Answer 2

提供<a>标记ID，以便在添加click事件时，它只会捕获1个锚点。

否则点击将继续显示页面中的每个锚点

Answer 3

我在此处所做的就是为每个data-target添加<a>属性，其值为相应div的ID，并将其用于toggle div }。就这么简单

我还将href="#"替换为href="javascript:;"，以避免页面在顶部滚动。

$('a').click(function(){
  $($(this).attr('data-target')).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="javascript:;" data-target="#csgo_team">
    <img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
</a>	
<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>
<br>
<!-- second team -->
<a href="javascript:;" data-target="#lol_team">
  <img src="./img/team_lol.png" alt="League of Legends"/>
</a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>
<br>
<!-- thrid team -->

<a href="javascript:;" data-target="#cod_team">
  <img src="./img/team_cod.png" alt="Call of Duty"/>
</a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

点击打开不同的div

3 个答案: