Javascript 仅当页面上有特定元素时才显示特定

我正试图利用Zendesk建立我在帮助中心的公司

我已经成功地实现了sidenav，但我很难让它根据用户所在帮助中心的类别显示不同的锚链接。Zendesk只允许编辑类别页面模板的HTML，我无法动态加载链接

有人能告诉我如何显示DIV_1吗？我已经搜索过了，但似乎找不到任何相关的东西

---

从这里开始，我将以相同的方式对其他部分执行相同的操作，例如，如果页面包含，则仅显示DIV_2。您可以使用内置的DOM查询方法来完成此操作。在本例中，您希望将if条件与查询相结合，如下所示：

if (document.querySelector('li[title="Using ProductName"]')) {
    // make #DIV_1 visible however you please here
    document.querySelector('#DIV_1').display = 'block';
}

如果标题为Using ProductName的li不存在，则DIV_1将保持不可见；如果是，则会显示。

您可以执行快速for循环检查：

var items = document.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
  if (items[i].title == titleToCheckFor) { showElement(); }
}

---

你可以用你正在寻找的标题填写titletocheckfore，showElement函数会显示div，或者你可以直接在循环中显示div。

使用DOM查询方法querySelector，你可以搜索目标元素，默认情况下，我们将所有div设置为隐藏，然后只显示所需的div

<style>
   .module {
      display:none;
   }
</style>
<script>
   // by default we show MODULE A else show module B
   var module = "DIV_1"; 
   if (document.querySelector('li[title="Developer Portal"]')) { 
      module = "DIV_2"; 
   }
   // we show the respective DIV
   document.querySelector('.' + module).display = 'block'; 
</script>

<div class="module DIV_1" id="DIV_1">
 ...  
</div>  
<div class="module DIV_2" id="DIV_2">
....
</div> 

---

您可以通过CSS类实现这一点

解决方案1：

这是示例HTML：

<div id="Div_1" class="menu-div using-productname">
</div>
<div id="Div_2" class="menu-div help-centre">
</div>
<div id="Div_3" class="menu-div other-tab">
</div>

<div class="parent-div">
<div id="Div_1" class="menu-div">
</div>
<div id="Div_2" class="menu-div">
</div>
<div id="Div_3" class="menu-div">
</div>

因此，当页面加载时，默认情况下所有菜单div都是隐藏的

现在，当您使用ProductName移动到某个选项卡时，您所需要做的就是

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which matches with your Divs in the menu
document.querySelector(".menu-div").style.display = "none";  //Set all menu divs to hidden
document.querySelector("." + className).style.display = "block";  //Show the desired menu div

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which you will add to the parent
document.querySelector(".parent-div").className = "parent-div " + className;   //Set the parent div class to the className - the css will take care of the rest!

解决方案2：

这是示例HTML：

<div id="Div_1" class="menu-div using-productname">
</div>
<div id="Div_2" class="menu-div help-centre">
</div>
<div id="Div_3" class="menu-div other-tab">
</div>

<div class="parent-div">
<div id="Div_1" class="menu-div">
</div>
<div id="Div_2" class="menu-div">
</div>
<div id="Div_3" class="menu-div">
</div>

现在，当您使用ProductName移动到某个选项卡时，您所需要做的就是

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which matches with your Divs in the menu
document.querySelector(".menu-div").style.display = "none";  //Set all menu divs to hidden
document.querySelector("." + className).style.display = "block";  //Show the desired menu div

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which you will add to the parent
document.querySelector(".parent-div").className = "parent-div " + className;   //Set the parent div class to the className - the css will take care of the rest!

---

注意-您还应该在不同的LIs和A标签上使用不同的ID。

您可以在Zendesk帮助中心使用jQuery，以便

var test =  $('.breadcrumbs').children(':contains(amy)')
if(test.length > 0) {
   do something here like 
   $('#LI_1').hide();
}

---

这是一种简单的蛮力，但它有效

谢谢大家!！我已经试过了，除非我把它放在我的JS选项卡上错了，否则请看imagePerfect谢谢，需要是if document.querySelector'li[title=Using ProductName]{//make DIV_1 visible whiche you you lose document.querySelector'DIV_1.style.display='block'；}用于显示和隐藏元素，不是reliability@jamesjara请解释一下。。。for循环有什么不可靠的地方？