jQuery和CSS不能在Sharepoint 2013工作

Question

我的web部分jQuery和CSS代碼在部署到SharePoint Server 2013服務器後不起作用。

我想問一下是否因爲"runat=server"？我使用它是因爲我需要識別html元素並在後端代碼中使用類常量值進行綁定。

任何人都可以告訴我應該如何部署jQuery和CSS？ 這裏是我的代碼

JQuery的

$(document).ready(function() { 
    $('.icon').mouseover(function() { 
     $(".menuLink").stop(true, false).fadeIn(280); 
     $('.menuLink').stop(true, false).animate({ 
      width: "300px", 
      opacity: "1", 
      "padding-left": "10px" 
     }); 
    }); 
    $('.divTableBody').mouseleave(function() { 
     $('.menuLink').stop(true, false).animate({ 
      width: "0px", 
      opacity: "0", 
      "padding-left": "0px" 
     }); 
    }); 
});  

CSS

.divTable { 
    display: table; 
    float: right; 
    height: 200px; 
    background-color: #0082CA; 
} 

.divTableBody { 
    display: table-row-group; 
} 

.divTableRow { 
    display: table-row; 
} 

.menuLink, .icon { 
    display: table-cell; 
    padding: 10px 0px; 
} 

.menuLink { 
    display: none; 
    vertical-align: middle; 
    overflow: hidden; 
    white-space: nowrap; 
    padding-left: 10px; 
} 

.menuLink a { 
    font-size: large; 
    text-decoration: none; 
    color: white; 
} 

.divTableRow:hover { 
    background-color: #005C8F; 
} 

.icon { 
    width: 30px; 
    padding-left: 10px; 
    padding-right: 10px; 
    position: relative; 
} 

.icon img { 
    width: 20px; 
    height: 20px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.userProfile { 
    height: 30px; 
    width: 30px; 
    border-radius: 50%; 
    display: block; 
    float: right; 
    padding-right: 10px; 
} 

/* Make the badge float in the top right corner of the button */ 
#badge { 
    background-color: #fa3e3e; 
    border-radius: 5px; 
    color: white; 
    padding: 1px 3px; 
    font-size: 10px; 
    position: absolute; /* Position the badge within the relatively positioned button */ 
    top: 20px; 
    right: 8px; 
}  

HTML

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="menuLink"> 
       <a id="txtLink1" runat="server"></a> 
      </div> 
      <div class="icon"> 
       <img id="imgLink1" runat="server" /> 
      </div> 
     </div> 
    </div> 
</div> 

謝謝。

Answer 1

jQuery無法通過您在服務器端（通過實施runat="server"）指定的ID 找到元素。該ID的值爲已更改爲客戶端前綴包含有關父元素的信息（檢查在瀏覽器中）。

您可以使用ClientIDMode="static"防止這一點，並保留ID值

此屬性適用於所有適用的HTML。

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="menuLink"> 
       <a id="txtLink1" ClientIDMode="static" runat="server"></a> 
      </div> 
      <div class="icon"> 
       <img id="imgLink1" ClientIDMode="static" runat="server" /> 
      </div> 
     </div> 
    </div> 
</div> 

read more on MSDN here...