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

あなたは効果的にあなたのjavascriptを使用してSharePointページ上のすべての<li>要素のonclickの動作を変更しています。 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"); 
      }); 
}); 

これは（ないときにのみ、コードを実行しますコードに達する）。