0

を使用してjqueryに基づいて3つの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

このようなものを試してみてください...

​&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()により、ページが完全に読み込まれるまでクリックの配線が行われないようになります。ページが最初にロードされると、すべてが表示されます。

ユーザーが のクラスのリンクの 1 つをクリックするとmenu、関数が実行されます。divのクラスを持つすべてを非表示にしますfeaturedposts_content。次に、クリックされたリンクに基づいて、 を取得し、表示valueする設定に使用しますdivvalueリンクの は表示idする のdivです。

于 2012-12-21T17:30:47.283 に答える
0

更新パネルが台無しになっているようです。

postback ごとにイベントをバインドする必要があります。そうしないと、デフォルトのページに戻されます

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

問題は、イベントに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>
于 2012-12-21T17:12:01.903 に答える