首先重定向到url，然后更改href答案

【问题标题】：At first redirect to url and then change href首先重定向到url，然后更改href
【发布时间】：2012-03-15 09:33:57
【问题描述】：

这是我想要的代码，当我首先单击链接时，会按链接重定向到页面，然后更改 href。问题是当我单击此 href 更改但页面没有更改时

$(window).load(function() {
  $("#product").click(function() {
    $('#product').attr('href', 'javascript:void(0);');
    $('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
    $('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
  });

  $("#seller").click(function() {
    $('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
    $('#seller').attr('href', 'javascript:void(0);');
    $('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
  });

  $("#buy").click(function() {
    $('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
    $('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
    $('#buy').attr('href', 'javascript:void(0);');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchTabs">
  <li class="current">
    <a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
  </li>
  <li class="tabRight">
    <a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
  </li>
  <li>
    <a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
  </li>
</ul>

【问题讨论】：

请格式化您的代码，不要粘贴超长的一行代码。

标签： javascript jquery html href

【解决方案1】：

为什么需要更改链接的href 属性？你为什么不直接使用重定向它们：

window.location.href='/to/infinity/and/beyond';

【讨论】：

【解决方案2】：

我想我明白你想要做什么。

它不起作用的原因是，当您单击链接时，它会像往常一样将用户发送到 href 内的任何内容。看起来您正在寻找的是一种根据您所在页面动态更改链接的方法？对吧？

我建议使用服务器端语言来处理它。使用参数来控制要显示的链接。

举个例子：

<ul id="searchTabs">
    <li class="current" >
        <a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
    </li>
    <li class="tabRight">
        <a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
    </li>
    <li >
        <a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
    </li>
</ul>

会变成：

<ul id="searchTabs">
       <li class="current" >
          <a rel="nofollow" href="products.php?links=1" id="product">Sản phẩm</a>
      </li>
      <li class="tabRight">
          <a rel="nofollow" href="products.php?links=2" id="seller">Cung</a>
      </li>
      <li >
          <a rel="nofollow" href="products.php?links=3" id="buy">Cầu</a>
      </li>
</ul>

然后您可以使用诸如 PHP 之类的服务器端语言对链接参数进行切换。然后根据设置更改 href 属性。

你的不工作的原因是因为它重定向了用户。这意味着你是 JavaScript 根本不重要，因为它对其他页面没有任何影响。

您可以阻止它更改实际位置，但听起来不像您正在寻找的。但以防万一..为了防止此类事件，您可以使用：

$(window).load(function(){
    $("#product").click(function(e){
        e.preventDefault();
        $('#product').attr('href','javascript:void(0);');
        $('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');  
        $('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
    });

    $("#seller").click(function(e) {
        e.preventDefault();
        $('#product').attr('href','http://www.vmarket.com.vn/products.php');
        $('#seller').attr('href','javascript:void(0);');
        $('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
    });

    $("#buy").click(function() {
        e.preventDefault();
        $('#product').attr('href','http://www.vmarket.com.vn/products.php');
        $('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');
        $('#buy').attr('href','javascript:void(0);');
    });
});

希望对您有所帮助：）如果您有任何想要解释的内容，请发表评论。

【讨论】：