0

我正在尝试显示/隐藏基于 jquery 的三个 div，使用<a href="#id">. 但是代码不起作用。当我使用<a>使用 rel 属性的链接进行映射时，代码工作正常。

例如：<a rel="cat1" class="selected">

默认.aspx

<div id="featuredleftdiv">
    <script type="text/javascript">
        var featuredposts = new ddtabcontent("featuredposts")
        featuredposts.setpersist(true)
        featuredposts.setselectedClassTarget("link")
        featuredposts.init(10000)
    </script>

    <ul id="featuredposts" class="featuredposts">
        <li><a href="#cat1" class="menu">a</a></li>
        <li><a href="#cat2" class="menu">b</a></li>
    </ul>

    <div class="clear"></div>

    <div id="cat1" class="featuredposts_content">
        <asp:UpdatePanel ID="UpdatePanel4" runat="server"> 
            <ContentTemplate>
                <asp:ListView ID="ListView4" runat="server" GroupItemCount="1" OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>  

    <div id="cat2" class="featuredposts_content">
        <asp:UpdatePanel ID="UpdatePanel5" runat="server"> 
            <ContentTemplate>
                <asp:ListView ID="ListView5" runat="server" GroupItemCount="1"  OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

jQuery

在 html 的 Head 部分

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
</script>
4

4 回答 4

1

您在页面上存在元素之前分配事件处理程序。将 head 部分中的脚本更改为此...

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function() {
        $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
    });
</script>

该$(function() { })代码使您的脚本在文档准备好或所有元素都已创建时运行。

于 2012-12-21T17:07:21.697 回答
0

看起来更新面板搞砸了。

您需要在每次回发后绑定事件，否则它会被设置回默认页面

$(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
    PostBack();
});

function PostBack(){
       $("a.menu").off().on.('click' , function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
}
于 2012-12-21T17:00:42.143 回答
0

好吧，我认为问题是没有为事件使用文档就绪处理程序或加载函数：

<script type="text/javascript">
   $(document).ready(function(){ // <-------------------------you are missing this
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
   }); //<----------------------------------------------------
</script>
于 2012-12-21T17:12:01.903 回答
0

尝试这样的事情......

​&lt;html>
   <script>
      $(document).ready(function(){
         $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $("#" + $(this).attr("value")).show();
         });​
      })
   </script>
   <body>
      <ul id="featuredposts" class="featuredposts">
         <li><a href="#" class="menu" value="IdOfDiv1">something a</a></li>
         <li><a href="#" class="menu" value="IdOfDiv2">something b</a></li>
      </ul>

      <div id="IdOfDiv1" class="featuredposts_content">
         Cat1
      </div>  

      <div id="IdOfDiv2" class="featuredposts_content">
         Cat2
      </div>
  </body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

编辑：这是一个快速的解释。

这$(document).ready()将确保在页面完全加载之前不会发生点击的连接。当页面首次加载时，所有内容都在显示。

一旦用户单击类为 的链接之一menu，该函数将运行。它将隐藏所有div具有featuredposts_content. 然后，根据点击了哪个链接，它会抓取value并使用它来设置div要显示的内容。value链接中的是id要div显示的。

于 2012-12-21T17:30:47.283 回答