Javascript 若url哈希不包含任何字符串，则执行函数

我正在编写一个脚本，根据散列中的字符串更改哪个元素是可见的。该脚本将出现在博客页面上，用户可以在其中按类别筛选博客文章。当用户筛选到某个类别时，该类别将以哈希链接的形式附加到url

example.com/#categoryA

在这一点上，我希望一个文本框对应于每一组过滤后的文章出现在投资组合旁边。但是，如果用户没有过滤帖子，或者从过滤帖子转到查看所有帖子，则url中有一个如下所示的散列：

example.com/#

在这种情况下，我希望显示一个默认文本框

我的脚本（如下）除了在url以散列结尾时显示默认文本框之外，其他都做了

var frag = window.location.href.split("#");
var hashClassChange = function() {
  if (window.location.hash) {
    //If the url hash contains commercial, show the commercial box, hide the last active box
    if (window.location.hash.indexOf('commercial') == 1) {
      $('#box1').addClass("active");
      $('#default').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains hospitality, show the hospitality box, hide the last active box
    else if (window.location.hash.indexOf('hospitality') == 1) {
      $('#box2').addClass("active");
      $('#default').removeClass("active");;
      $('#box1').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains municipal-institutional, show the municipal / institutional box, hide the last active box
    else if (window.location.hash.indexOf('municipal-institutional') == 1) {
      $('#box3').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains residential, show the residential box, hide the last active box
    else if (window.location.hash.indexOf('residential') == 1) {
      $('#box4').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
    } 
    //If the url hash does not contain any string, show the default box
    else if (!frag[1].length) {
      $('#default').addClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box3').removeClass("active");
    }
  }
};
// repeats function every 500 milliseconds to check if the url hash has been changed
setInterval(hashClassChange, 500);

如何修复此脚本，以便在url以单个哈希结尾时显示默认文本框

---

我有一个代码笔设置（）来显示这个动作。

你可以检查最后一个字符是否为

var lastChar = location.pathname.substr(location.pathname.length - 1); 
if(lastChar == '#')
 //Your default textbox show hide logic goes here

---

您可以检查最后一个字符是否为

var lastChar = location.pathname.substr(location.pathname.length - 1); 
if(lastChar == '#')
 //Your default textbox show hide logic goes here

---

请尝试使用以下代码：

//If the url hash does not contain any string, show the default box
else if (frag.length < 1 || (frag.length > 1 && frag[1].length == 0) ) {
    //if we don't have # in URL then frag will have only single 0th index
    //if we have # in URL but nothing after that then its length will be zero
  $('#default').addClass("active");
  $('#box1').removeClass("active");
  $('#box2').removeClass("active");
  $('#box3').removeClass("active");
  $('#box3').removeClass("active");
}

//如果url哈希不包含任何字符串，则显示默认框
else if（frag.length<1 | |（frag.length>1&&frag[1]。length==0））{
//如果我们在URL中没有#，那么frag将只有一个第0个索引
//如果我们在URL中有#，但之后没有任何内容，那么它的长度将为零
$（“#默认值”）.addClass（“活动”）；
$（'#box1'）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
}

请尝试使用以下代码：

//If the url hash does not contain any string, show the default box
else if (frag.length < 1 || (frag.length > 1 && frag[1].length == 0) ) {
    //if we don't have # in URL then frag will have only single 0th index
    //if we have # in URL but nothing after that then its length will be zero
  $('#default').addClass("active");
  $('#box1').removeClass("active");
  $('#box2').removeClass("active");
  $('#box3').removeClass("active");
  $('#box3').removeClass("active");
}

//如果url哈希不包含任何字符串，则显示默认框
else if（frag.length<1 | |（frag.length>1&&frag[1]。length==0））{
//如果我们在URL中没有#，那么frag将只有一个第0个索引
//如果我们在URL中有#，但之后没有任何内容，那么它的长度将为零
$（“#默认值”）.addClass（“活动”）；
$（'#box1'）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
}

问题是因为当您单击默认的

窗口时。location.hash

将是一个

空字符串

，因此如果最后一次单击的字符串可见，它将不会首先进入内部

删除

if（window.location.hash）{}

part，它将按预期工作

var-frag；
frag=window.location.href.split（“#”）；
var hashClassChange=函数（）{
if（window.location.hash.indexOf（'commercial'）==1）{
$（'#box1'）.addClass（“活动”）；
$（“#默认值”）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
$（'#box4'）.removeClass（“活动”）；
} 
else if（window.location.hash.indexOf（'hospitality'）==1）{
$（'#box2'）.addClass（“活动”）；
$（“#默认值”）.removeClass（“活动”）；；
$（'#box1'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
$（'#box4'）.removeClass（“活动”）；
} 
else if（window.location.hash.indexOf（‘市政机构’）==1）{
$（'#box3'）.addClass（“活动”）；
$（“#默认值”）.removeClass（“活动”）；
$（'#box1'）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（'#box4'）.removeClass（“活动”）；
} 
else if（window.location.hash.indexOf（'residential'）==1）{
$（'#box4'）.addClass（“活动”）；
$（“#默认值”）.removeClass（“活动”）；
$（'#box1'）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
} 
else if（框架[1]的类型==“未定义”| |！框架[1]。长度）{
$（“#默认值”）.addClass（“活动”）；
$（'#box1'）.removeClass（“活动”）；
$（'#box2'）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
$（“#box3”）.removeClass（“活动”）；
}
};
setInterval（hashClassChange，500）
正文{
字体系列：无衬线；
}
#违约{
背景：红色；
}
#框1{
背景：橙色；
}
#框2{
背景：黄色；
}
#框3{
背景：绿色；
}
#方框4{
背景：浅蓝色；
}
李{
显示：内联块；
宽度：400px；
填充：10px；
位置：绝对位置；
不透明度：0；
过渡：不透明度1s；
}
李：很活跃{
不透明度：1；
}

过滤帖子的链接：
|
|
|
|

默认文本Quisque posuere augue eu vulputate前庭。Mauris lacinia DIAMET magna是一家大型碳酸饮料公司。整数厄洛斯直径，福西布斯nec我坐在阿梅特，苏西比特奥纳雷马萨。这是一个很好的例子。佩伦茨克是一位智者。梅塞纳坐在奥古斯广场上。在viverra sapien luctus eget中，拍卖商ligula risus和laoreet nisl varius ac.Donec euismod erat neque
商业文本Nulla justo quam，turpis a中的射手座，rutrum dapibus tellus。这是一个很好的选择。阿梅特·萨吉蒂·奥奇坐在那里。普罗恩·奎姆、坦普尔·埃吉特·莱古拉·内克、孕妇维尼那蒂斯·泰勒斯。这是我生命的全部。在交通工具分子弧中，nec设备仅在两次死亡时才使用，而在两次死亡时使用的则是非tellus ac、varius aliquam dui。莫比·康莫多·努勒盖特·卢克图斯·乌兰科珀。无便利。这是一种智慧的前庭，它是一种自由的生物
酒店文本包括eget nunc lobortis、varius felis ut、scelerisque tortor。梅塞纳斯·维塔·努克·利奥。毛里斯·非设施性毛里斯·伊努斯（Mauris non-facilisis risus，vel tincidunt enim）。Donec pharetra nisi是一家专门的公司。tincidunt的厄洛斯中的整数lacinia。Present et enim sem。在viverra erat的Sed，vitae tempus felis。前庭为索达莱斯利奥
市政/机构文本Maecenas rutrum diam nec sapien concetetur，viverra enim commodo。库拉比图尔·厄洛斯·里索斯。维韦拉·奎斯克·维韦拉·奎斯克·维韦拉·奎斯克·维韦拉·奎斯克·奎斯克·维韦拉·奎斯克·奎斯克·维韦拉·奎斯克·奎斯克·维韦拉·奎斯克·奎斯克·伊普斯。不可转让的权利。Morbi和lacus blandit，blandit ipsum non，mollis eros。酒后驾车