点击，导航到另一个页面，打开一个由javascript隐藏的div [英] With click, navigate to another page and open a div hidden by javascript

问题描述

我有两页。让我们调用第一页 index.html 和第二页 products.html 。

I have two pages. Lets call the first page index.html and the second page products.html.

在 products.html 我有一个隐藏的div，除非用户点击按钮显示它，如下所示：

On products.html I have a div that is hidden unless the user clicks a button to reveal it, as shown below:

$(document).ready(function() {
  
  $('.product-highlight').hide();
  
  $('a[href$=shoes').click(function() {
    $('#shoes').show();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product">
  <img src="http://placehold.it/100x100"/>
  <a href="#shoes">Show Shoes</a>
</div>

<div class="product-highlight" id="shoes">
  <p>These are the shoes</p>
</div>

现在我的 index.html 我有一个链接应该直接通过鞋子选项卡并显示它。

Now on my index.html I have a link that should directly lead to the shoes tab and have it revealed.

到目前为止，我所知道的是：

So far all I know how to do is:

$(document).ready(function() {
  
  $('a[href$=shoes]').click(function() {
    
    window.location.href= 'http://sample.com/products.php/';
   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#shoes">Take me to the shoes</a>

推荐答案

你可以使用：target 伪类。为此定义下一个CSS规则：

You can make use of :target pseudo-class. For this define next CSS rules:

#shoes {
    display: none; /* hide by default */
}
#shoes:target, /* and show either if class show is present (on click) */
#shoes.show {  /* or location hash matches id "shoes" */
    display: block;
}

在JS中你会添加类 show ：

$(document).ready(function() {

  $('.product-highlight').hide();

  $('a[href$=shoes').click(function() {
    $('#shoes').addClass('show');
  });

});

从索引页面重定向时，您还需要设置哈希 #shoes ：

When redirecting from index page you would also need to set a hash #shoes:

$(document).ready(function() {

  $('a[href$=shoes]').click(function() {

    window.location.href= 'http://sample.com/products.php/#shoes';

  });
});

这篇关于点击，导航到另一个页面，打开一个由javascript隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！