Question

以下是该网站的链接 http://urbanacountryclub.clubhouseonline-e3.net/The_Scene/The_Scene_(2)

在页脚中，当我点击三个3链接中的一个时，它总是重定向到第一个（高尔夫球）。我已经在html中正确链接，但我认为java脚本导致了这一点。

以下是代码：

<script>
  $(function(){ 
$(".nav-btns").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});
  });

</script>

Answer 1

$(this)指的是.nav-btns，容器，而不是单个按钮

  $(function(){ 
$(".nav-btns").click(function() {
  console.log(this);
  return false;
});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-btns">
<div class="nav-btn">
<div class="nav-image"><a href="/Golf/Golf"><img alt="Golf" src="/SiteDesign/Images/btn6.aspx"></a></div>

<div class="nav-text animated fadeInUp"><a href="/Golf/Golf">GOLF</a></div>
</div>

<div class="nav-btn">
<div class="nav-image"><a href="/Dining_(1)"><img alt="dining" src="/SiteDesign/Images/btn1.aspx"></a></div>

<div class="nav-text  animated fadeInUp"><a href="/Dining_(1)">DINING</a></div>
</div>

<div class="nav-btn">
<div class="nav-image"><a href="/Weddings/Weddings"><img alt="wedding button" src="/SiteDesign/Images/btn7.aspx"></a></div>

<div class="nav-text  animated fadeInUp"><a href="/Weddings/Weddings">WEDDINGS</a></div>
</div>
</div>

更改选择器以抓取.nav-button

$(function(){ 
$(".nav-btn").click(function() {
  console.log($(this).find("a").attr("href"));
  return false;
});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-btns">
<div class="nav-btn">
<div class="nav-image"><a href="/Golf/Golf"><img alt="Golf" src="/SiteDesign/Images/btn6.aspx"></a></div>

<div class="nav-text animated fadeInUp"><a href="/Golf/Golf">GOLF</a></div>
</div>

<div class="nav-btn">
<div class="nav-image"><a href="/Dining_(1)"><img alt="dining" src="/SiteDesign/Images/btn1.aspx"></a></div>

<div class="nav-text  animated fadeInUp"><a href="/Dining_(1)">DINING</a></div>
</div>

<div class="nav-btn">
<div class="nav-image"><a href="/Weddings/Weddings"><img alt="wedding button" src="/SiteDesign/Images/btn7.aspx"></a></div>

<div class="nav-text  animated fadeInUp"><a href="/Weddings/Weddings">WEDDINGS</a></div>
</div>
</div>

尝试将图片暂停链接到右页

1 个答案: