Question

我尝试使用Zendesk在帮助中心设置公司。

我设法实施了sidenav，但我努力使其显示不同的锚链接，具体取决于用户所在的帮助中心的类别。 Zendesk只允许您编辑类别页面模板的HTML，并且我无法动态加载链接。

任何人都可以提供有关如何显示DIV_1的建议，仅当该网页包含<li title="Using ProductName">时才能提供建议吗？我已经搜索过，但似乎找不到任何相关内容。

从那里开始，我会以相同的方式对其他部分执行相同操作（例如，如果网页包含DIV_2，则只显示<li title="Developer Portal"。

作为参考，我可以访问类别的HTML模板，CSS和JS。

提前致谢！

＆＃13;

<div class="container">
  <nav class="sub-nav">
    <ol class="breadcrumbs">
  
    <li title="Help Centre">
      
        <a href="/hc/en-us?preview%5Btheme_id%5D=209312965&amp;preview_as_role=manager&amp;use_theme_settings=false">Help Centre</a>
      
    </li>
  
    <li title="Using ProductName">
      
        Using ProductName
      
    </li>
  
</ol>

＆＃13;

    
    <div id="DIV_1">
    <ul id="UL_2">
        <li id="LI_1">
            <a href="#uniqueID0" id="A_1">Admin and Settings</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID1" id="A_1">Getting Started</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID2" id="A_1">Content Types and Sources</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID3" id="A_1">Content Management</a>
        </li>
     <li id="LI_1">
            <a href="#uniqueID4" id="A_1">Content Publishing</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID5" id="A_1">Apps</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID6" id="A_1">Analytics</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID7" id="A_1">Troubleshooting</a>
        </li>
    </ul>
</div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用内置的DOM查询方法来完成此任务。在这种情况下，您希望将if条件与查询结合起来，如下所示：

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

如果标题为li的{{1}}不存在，Using ProductName将保持不变;如果是的话，就会显示出来。

Answer 2

您可以快速titleToCheckFor循环检查：

showElement

您可以使用您要查找的标题填写div（＆＃34;使用_____＆＃34;），div功能会显示$(".servingSize").html(servingSize.replace(" ", ""));，或者你可以在循环中显示<script language="JavaScript"> window.onload = function() { function createTable(tableData) { var ul = document.getElementById('my_List'); var li = document.createElement('li'); var div = document.createElement('div'); var ahref = document.createElement('a'); tableData.forEach(function(rowData) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('span'); cell.innerHTML = cellData; row.appendChild(cell); }); ahref.appendChild(row); }); div.appendChild(ahref); li.appendChild(div); ul.appendChild(li); } createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]); } </script>。

Answer 3

使用DOM查询方法querySelector可以搜索目标元素，默认情况下我们将所有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>

Answer 4

您可以通过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>

现在你应该设置你的css：

.menu-div {
   display: none;
}

因此，当页面加载

时，默认情况下隐藏所有菜单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

解决方案2：

这是示例HTML：

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

现在你应该设置你的css：

.parent-div .menu-div {
   display: none;
}
.parent-div.using-productname #Div_1 {
   display: block;
}
.parent-div.help-centre #Div_2 {
   display: block;
}
.parent-div.other-tab #Div_3 {
   display: block;
}

现在，当您转到某个标签时，假设“使用ProductName”，您需要做的只是

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!

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

Answer 5

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

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

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

如果页面上有某个元素，则只显示某个<div>

5 个答案: