单击，导航到另一个页面并打开由 javascript 隐藏的 div

With click, navigate to another page and open a div hidden by javascript

提问by Mr.Smithyyy

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

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

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

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

products.html

产品.html

$(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>

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

现在在我的index.html我有一个链接，应该直接指向鞋子标签并显示它。

So far all I know how to do is:

到目前为止，我只知道该怎么做：

index.html

索引.html

$(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>

回答by dfsq

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

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

#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;
}

and in JS you would add class show:

在 JS 中，您将添加类show：

$(document).ready(function() {

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

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

});

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

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

$(document).ready(function() {

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

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

  });
});

回答by Daniel Beck

One strategy:

一种策略：

• Have index.html link to http://sample.com/products.php#shoes(a plain old <a href="/products.php#shoes">will do, no need for a jQuery click event here.)

• Have products.php check document.location.hash for '#shoes' and trigger $('#shoes').show()if present.

• 有指向http://sample.com/products.php#shoes 的index.html 链接（一个普通的老版本<a href="/products.php#shoes">就可以了，这里不需要 jQuery 单击事件。）

• 让 products.php 检查 document.location.hash 中的“#shoes”并$('#shoes').show()在存在时触发。

回答by Raphael diSanto

jQuery's .click() without any arguments, fires the click event on that element, so in the very simplest of solutions, if the user's coming to the products page by clicking the shoes link, add a query string to the end (/products.php/?q=shoes)

jQuery 的 .click() 不带任何参数，在该元素上触发 click 事件，因此在最简单的解决方案中，如果用户通过单击 shoes 链接进入产品页面，请在末尾添加一个查询字符串 (/products.click())。 php/?q=鞋子）

and then in the javascript in the product page, if it sees that there's a product needed, it can auto trigger the click event on whatever element on that page you're supposed to click on to make it show up.

然后在产品页面的 javascript 中，如果它看到需要一个产品，它可以自动触发该页面上您应该点击的任何元素上的点击事件以使其显示。

Thisquestion has an example of how to pull parameters out of a URL with jQuery.

这个问题有一个示例，说明如何使用 jQuery 从 URL 中提取参数。

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}   

回答by SerCrAsH

Read about Location hash

阅读位置哈希

At your link in index.html

在index.html 中的链接

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

And in your products.htmlscript :

在您的products.html脚本中：

$(document).ready(function() {

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

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

  if ( location.hash != 0 && location.hash == '#shoes' ){
     $('a[href$=shoes]').trigger('click');
  }
});

When you have a location.hashtarget to an element called #shoesin your products.html, the script will trigger the event button 'click'to reveal your awesome shoes.

当你有一个location.hash目标称为元素#shoes在你的products.html文件，该脚本将触发事件按钮'click'来显示你真棒鞋。

回答by Michael Palermo

Add one line of code as indicated below:

添加一行代码，如下所示：

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

  // add this line...
  $(window.location.hash).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>

Go to http://codepen.io/palermo4/pen/KpoGdYto test

去http://codepen.io/palermo4/pen/KpoGdY进行测试