Question

我有以下代码：

<li class="static">
  <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
    <span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Process Insight</span>
    </span>
  </span>
  <ul class="static">
    <li class="static">
      <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/teams/-Test/Pages/Process-Controls.aspx"><span class="additional-background ms-navedit-flyoutArrow">
        <span class="menu-item-text">Controls</span>
        </span>
      </a>
    </li>
    <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/teams/-Test/Pages/Evidence.aspx">
      <span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">PEvidences</span>
      </span>
      </a>
    </li>
    <li class="static">
      <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/teams/-Test/Pages/Process-Dashboard.aspx"><span class="additional-background ms-navedit-flyoutArrow">
        <span class="menu-item-text">PDashboard</span>
        </span>
      </a>
    </li>
    <li class="static">
      <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/teams/-Test/Pages/Process-Issue-Log.aspx"><span class="additional-background ms-navedit-flyoutArrow">
        <span class="menu-item-text">PIssueLog</span>
        </span>
      </a>
    </li>
  </ul>
</li>

这是自定义的javascript和css：

jQuery(document).ready(function(){
               $('#sideNavBox li.static:contains("Documents")').remove();
               $('#sideNavBox li.static:contains("Site Contents")').remove();
               

    $('#sideNavBox .menu-item-text:contains("Process Insight")').each(function() {
               $(this).replaceWith('<div class="header">Process Insight</div>');
               });
               
               
               $('#sideNavBox .menu-item-text:contains("Controls")').each(function() {
                              $(this).addClass("button");
                              $(this).addClass("processinsight");
                              $(this).addClass("controlframework");
               });
               
               $('#sideNavBox .menu-item-text:contains("PEvidences")').each(function() {
                              $(this).replaceWith('<span class="button processinsight evidence               ">Evidences</span>');
               });


               $('#sideNavBox .menu-item-text:contains("PIssueLog")').each(function() {
                              $(this).replaceWith('<span class="button processinsight issuelog">Issue Log</span>');
               });

               $('#sideNavBox .menu-item-text:contains("PDashboard")').each(function() {
                              $(this).replaceWith('<span class="button processinsight dashboard">Dashboard</span>');
               });
               
               
  
})

#siteIcon {
  width: 180px;
}

.header {
margin-left: 3px;
margin-top: 3px;
padding-top: 3px;
padding-bottom: 3px;
padding-left:3px;
background-color: rgb(234, 236, 238);
width: 205px;
color: #000000;
font-weight: bolder;
}

ul.static li {
  /*margin: 0 !important;
  padding; 0 !important;*/
  float: left;
}
#zz15_RootAspMenu ul { 
  margin: 0 !important;
  padding: 0 !important;
  width: 210px;
  float: left;
}

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item {
  padding: 0;
  margin: 0;
}

.static .ms-verticalAlignTop .ms-core-listMenu-verticalBox .ms-listMenu-editLink .ms-navedit-editArea {
  margin: 0 !important;
  padding: 0;
}
.ms-core-listMenu-root  {
margin-left: 5px;
padding: 0;
}
.ms-core-listMenu-verticalBox > .ms-core-listMenu-item, .ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item {
    display: block;
   padding: 0;
}

li > a.ms-core-listMenu-selected.ms-core-listMenu-item:hover, li > a.ms-core-listMenu-item:hover, li > a.ms-core-listMenu-item:active, li > a.selected, li a.static {
    background: none !important;
}

.ms-hidden {
  display: none !important;
}

.button {
  position: relative;
    width: 67px;
    height: 30px;
    margin-top: 3px;
    padding-top: 37px;
    padding-bottom: 0px;
    margin-left: 3px;
    display: block;
    outline: none;
    text-align: center;
               /*line-height: 90px;*/
               font-size: 10px;
    color: #ffffff;
    background-position: center 10px; 
    background-repeat: no-repeat;
}

.configuration {
               background-color: rgb(7, 73, 151);            
}

.processinsight {
               background-color: rgb(208, 2, 75);
}

.location {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/accounts.png);
}

.controlframework{
               background-image: url(/teams/CSA-Test/SiteAssets/icons/documents.png);
}

.calendar {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/calendars.png);
}

.contacts {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/contacts.png);
               
}

.workflow 
{
               background-image: url(/teams/CSA-Test/SiteAssets/icons/workflow.png); 
}

.riskassessment {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/risk.png);
}

.processes {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/process.png);
}

.matrix {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/matrix.png);
}

.evidence {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/evidence.png);                 
}

.mytasksl2 {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/validation.png);                              
}

.findings {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/findings.png);                   
}

.dashboard {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/reporting.png);                
}

.issuelog {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/remediation.png);                          
}

.mytasksl1 {
                              background-image: url(/teams/CSA-Test/SiteAssets/icons/mytasks.png);                  
}

.mytasks {
                              background-image: url(/teams/CSA-Test/SiteAssets/icons/mytasks.png);                  
}


.findings {
                              background-image: url(/teams/CSA-Test/SiteAssets/icons/findings.png);                   
}

.home {
               background-image: url(/teams/CSA-Test/SiteAssets/icons/home.png);                       
}

.configuration:hover {
background-color: rgb(219, 225, 238);
}

.selected .configuration {
               background-color: rgb(219, 225, 238);
}

 .selected .internalaudit {
               background-color: #5588EE;       
}

.selected .l1assessment {
               background-color: rgb(241, 225, 227);      
}


.internalaudit {
               background-color: rgb(86, 39, 111);
}

.internalaudit:hover, .l2assessment:hover {
background-color: #E5F1FF;
}


.l1assessment {
    background-color: rgb(230, 131, 1);
}

.l1assessment:hover {
background-color: rgb(241, 225, 227);
}

.processinsight:hover {
  background-color: #FFE5E5;
}

.l2assessment {
               background-color: rgb(86, 39, 111);
}

菜单呈现如下：

由于某种原因，用户无法单击“问题日志”按钮。您需要从按钮稍微单击左键，然后该链接将起作用并指示您发出日志页面。

这是什么原因以及如何解决这个问题？

Answer 1

这是一个CSS问题，如果你在浏览器中检查元素（最后一个按钮），你会看到还有另一个html元素。您可以通过各种方式解决这个问题。通过z-index或以正确的方式放置所有html元素。

按钮链接不起作用

1 个答案: