的Default.aspx

Question

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

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

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

Answer 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() { })代码使您的脚本在文档准备好或者所有元素都已创建时运行。

Answer 2

看起来更新面板正在弄乱它。

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

$(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;
        });
}

Answer 3

我认为问题是没有使用doc ready处理程序或事件的加载函数：

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

Answer 4

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

<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的{{1}}。

使用jquery和c＃显示/隐藏div

的Default.aspx

JQuery的

4 个答案: