jQuery基于url哈希和字符串隐藏div答案

【问题标题】：JQuery hide div based on url hash and stringjQuery基于url哈希和字符串隐藏div
【发布时间】：2013-10-01 19:58:44
【问题描述】：

我试图隐藏基于 url 哈希标记的 div。我正在使用一个名为 zozo tabs 的 jquery 插件，它允许进行深度链接并显示和隐藏 div。

页面上有一个特定的 div（不在选项卡区域中）我想在给定 url/s 的情况下隐藏。我已经搜索过，但无法弄清楚。请原谅我的 JavaScript 菜鸟！！！我试过这个。没有这样的运气。它似乎不起作用。任何帮助将不胜感激。

我试过 php 但它在哈希上不起作用

要启动插件会创建这种类型的 url

http://localhost:8888/site/funds/#tabbed-nav=fund-strategy

html 是：

 <ul>
    <li data-link="fund-strategy"><a>Fund Strategy</a></li>
    <li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
    <li data-link="performance"><a>Performance</a></li>
</ul>

<div class="strategy">This copy shows when the li is clicked on</div>

这是我试图用 js 隐藏一个给定 url 的 div

var jQ = jQuery.noConflict();
jQ(document).ready(function() { 
    var url = document.location.href;

    if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
        jQ('.fourth').hide();
    };
});


<div class="fourth">Hide me please!</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

尝试使用这样的东西：

var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
   $('.fourth').hide();
}

请确保您的 html 代码中有一个带有“fourth”类的 html 元素。否则这不会隐藏任何东西。

【讨论】：

从技术上讲，这两个答案都应该可以工作，但它们不能。可能是因为数据链接而不是文档本身使用了 id/#。
window.location.hash 包含前导“#”。因此正确的比较是 ...currentHash == "#tabbed-nav=fund-strategy"...

【解决方案2】：

我想我找到了问题所在。 zozo 选项卡使用 hashchange。因此，在将我的头撞到墙上并从这里的用户那里获得了巨大的灵感之后。我下载了 ba.hashchange 并将给定的答案包装在 hashchange 函数中，如果有人感兴趣，这里是代码。这似乎奏效了。

var jz = jQuery.noConflict();
jz(function(){
  jz(window).hashchange( function(){
  // Alerts every time the hash changes!
    var hash = document.location.hash;

    if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
        jz('.fourths').show();  
    } else {
        jz('.fourths').hide();  
    }

})
   jz(window).hashchange();

 });

【讨论】：