的Sharepoint導航停止工作，這個腳本內嵌到網頁

Question

我正在使用jQuery和之前和之後的CSS單擊時更改選項卡。當嵌入到SharePoint頁面時，導航上的鏈接停止工作。除了導航到其他頁面的鏈接外，其他所有功能都在頁面上運行。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
\t <script> 
 
\t \t $(function() { 
 
\t \t \t $("li").click(function(e) { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t $("li").removeClass("selected"); 
 
\t \t \t $(this).addClass("selected"); 
 
\t \t \t }); 
 
\t \t }); 
 
\t </script>

<style> 
 
\t \t .tabrow { 
 
\t \t  text-align: center; 
 
\t \t  list-style: none; 
 
\t \t  margin: 50px 0 36px; 
 
\t \t  padding: 0; 
 
\t \t  line-height: 24px; 
 
\t \t  height: 26px; 
 
\t \t  overflow: hidden; 
 
\t \t  font-size: 16px; 
 
\t \t  font-family: verdana; 
 
\t \t  position: relative; 
 
\t \t } 
 
\t \t .tabrow li { 
 
\t \t  border: 1px solid #AAA; 
 
\t \t  background: #D1D1D1; 
 
\t \t  background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
\t \t  background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
\t \t  background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
\t \t  background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
\t \t  background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
\t \t  display: inline-block; 
 
\t \t  position: relative; 
 
\t \t  z-index: 0; 
 
\t \t  border-top-left-radius: 6px; 
 
\t \t  border-top-right-radius: 6px; 
 
\t \t  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; 
 
\t \t  text-shadow: 0 1px #FFF; 
 
\t \t  margin: 0 -5px; 
 
\t \t  padding: 0 20px; 
 
\t \t } 
 
\t \t .tabrow a { 
 
\t \t \t color: #555; 
 
\t \t \t text-decoration: none; 
 
\t \t } 
 
\t \t .tabrow li.selected { 
 
\t \t  background: #FFF; 
 
\t \t  color: #333; 
 
\t \t  z-index: 2; 
 
\t \t  border-bottom-color: #FFF; 
 
\t \t } 
 
\t \t .tabrow:before { 
 
\t \t  position: absolute; 
 
\t \t  content: " "; 
 
\t \t  width: 100%; 
 
\t \t  bottom: 0; 
 
\t \t  left: 0; 
 
\t \t  border-bottom: 1px solid #AAA; 
 
\t \t  z-index: 1; 
 
\t \t } 
 
\t \t .tabrow li:before, 
 
\t \t .tabrow li:after { 
 
\t \t  border: 1px solid #AAA; 
 
\t \t  position: absolute; 
 
\t \t  bottom: -1px; 
 
\t \t  width: 5px; 
 
\t \t  height: 5px; 
 
\t \t  content: " "; 
 
\t \t } 
 
\t \t .tabrow li:before { 
 
\t \t  left: -6px; 
 
\t \t  border-bottom-right-radius: 6px; 
 
\t \t  border-width: 0 1px 1px 0; 
 
\t \t  box-shadow: 2px 2px 0 #D1D1D1; 
 
\t \t } 
 
\t \t .tabrow li:after { 
 
\t \t  right: -6px; 
 
\t \t  border-bottom-left-radius: 6px; 
 
\t \t  border-width: 0 0 1px 1px; 
 
\t \t  box-shadow: -2px 2px 0 #D1D1D1; 
 
\t \t } 
 
\t \t .tabrow li.selected:before { 
 
\t \t  box-shadow: 2px 2px 0 #FFF; 
 
\t \t } 
 
\t \t .tabrow li.selected:after { 
 
\t \t  box-shadow: -2px 2px 0 #FFF; 
 
\t \t } 
 
\t </style>

Answer 1

您有效地改變每個<li>元素的onclick行爲您的SharePoint頁面上使用您的JavaScript。 嘗試更具體的與您的jQuery選擇器。例如像這樣：

 $(".tabrow li").click(function(e) { 
      e.preventDefault(); 
      $(this).clostest(".tabrow").find("li").removeClass("selected"); 
      $(this).addClass("selected"); 
     }); 

你也可能會遇到在生產環境中的問題，請附上您的jQuery這樣的：

$(document).ready(function() { 
      $(".tabrow li").click(function(e) { 
       e.preventDefault(); 
       $(this).clostest(".tabrow").find("li").removeClass("selected"); 
       $(this).addClass("selected"); 
      }); 
}); 

這將執行代碼，當頁面完成加載（不僅當代碼已到達）。