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