Button-Link nicht funktioniert

-2

Ich habe folgenden Code:Button-Link nicht funktioniert

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

Hier ist die benutzerdefinierte JavaScript und 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); 
 
}

Das Menü wiedergegeben wird wie folgt:

Aus irgendeinem Grund, klicken Sie auf der Benutzer kann nicht auf der „Ausgabe Log“ Taste. Sie müssen etwas nach links von der Schaltfläche klicken und dann funktioniert der Link und weist Sie an, Protokollseite auszustellen.

Was ist der Grund dafür und wie kann ich dieses Problem beheben?

Quelle

2016-12-12 Kris Van den Bergh

Haben Sie vergessen, Ihre CSS hinzuzufügen? –

Erinnert an den berühmten Monty Python Song ... Span, span, span,/span,/span,/span – mplungjan

Das hat mein Problem gelöst. Ich habe einen der Span's ausgepackt und jetzt funktioniert es! –

Dies ist ein CSS-Problem, wenn Sie Element (die letzte Schaltfläche) in Ihrem Browser überprüfen, werden Sie sehen, dass es ein anderes HTML-Element darüber gibt. Sie können das in vielerlei Hinsicht beheben. Mit dem Z-Index oder indem Sie alle Ihre HTML-Elemente richtig platzieren.

Quelle

2016-12-12 09:59:13

Danke M. Lodhi. Ich sehe das leider nicht .. wie siehst du das und warum hat dieses Element ein anderes Element darüber, während die anderen Tasten nicht? –

weil Sie erwähnt haben "Sie müssen etwas nach links von der Schaltfläche klicken und dann funktioniert der Link und weist Sie an, Protokollseite auszustellen.". Das heißt, wenn Sie auf den Button klicken, wird der Button nicht angeklickt, aber wenn Sie leicht auf den linken Button klicken, geschieht dies im Allgemeinen, wenn wir unser CSS oder HTML nicht richtig geschrieben haben. –

Dies ist seltsam, weil die Schaltfläche nicht anders als die anderen formatiert ist ... –

Button-Link nicht funktioniert

Antwort

Verwandte Themen