Question

在这段代码中我的defualt页面是＆＃34;你的朋友＆＃34;我只能加载一个名为is＆＃34; Your Friends Requests＆＃34;但我想用jquery加载我的其他部分，但我不知道如何加载其他部分??

我的菜单是：

            <ul class="nav nav-tabs nav-tabs-info" id="nav">
                <li class="active"><a>Your Friends</a></li>
                <li><a href="#" id="call-requests">Your Friends Requests</a></li>
                <li><a href="#" id="call-incoming">Incoming Friends Requests</a></li>
                <li><a href="#" id="call-send">Send Friends Requests</a></li>
            </ul>

我的部分是：

          <section class="main-content"  id="Friends">
            <div class="page-heading">
            <h1 class="caption">Your Friends</h1>
            </div>
          </section>

    <section class="main-content"  id="requests" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Your Friends Requests</h1>
            </div>
          </section>

    <section class="main-content"  id="incoming" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Incoming Friends Requests</h1>
            </div>
          </section>

    <section class="main-content"  id="send" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Send Friends Requests</h1>
            </div>
          </section>

我使用的脚本代码是：

        <script>
            $(document).ready(function(){
                $('#call-requests').click(function(){
                var toLoad = $(this).attr('href')+' #friends';
                $('#friends').hide('fast',loadContent);
                $("#loading_full").fadeIn('normal');
                function loadContent() {
                    $('#friends').load(toLoad,'',showNewContent())
                }
                function showNewContent() {
                    $('#requests').show('normal',hideLoader());
                }                
                function hideLoader() {
                $("#loading_full").fadeOut('normal');
                }
                return false;
                });
            });
        </script>

如果有人帮助我如何加载我的其他部分，我将感激不尽。

Answer 1

这可能符合您的要求。

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1>Load Contents Using jquery</h1>

<ul id="myMenu">
  <li><a href="#" data-id="Friends">Friends</a></li>
  <li><a href="#" data-id="requests">Requests</a></li>
  <li><a href="#" data-id="incoming">Incoming</a></li>
  <li><a href="#" data-id="send">Send</a></li>
</ul>



<section class="subcontent"  id="Friends" style="display:block" >
        <div class="page-heading">
        <h1 class="caption">Your Friends</h1>
        </div>
      </section>

<section class="subcontent"  id="requests" >
        <div class="page-heading">
        <h1 class="caption">Your Friends Requests</h1>
        </div>
      </section>

<section class="subcontent"  id="incoming" >
        <div class="page-heading">
        <h1 class="caption">Incoming Friends Requests</h1>
        </div>
      </section>

<section class="subcontent"  id="send">
        <div class="page-heading">
        <h1 class="caption">Send Friends Requests</h1>
        </div>
      </section>




<script type="text/javascript">

$(document).ready(function()
{
 $(".subcontent").hide();
 $("#Friends").show(); //show initial friends list

$('#myMenu').on('click','a',function()
{
    // fade out open subcontents
    $('.subcontent:visible').hide();
    // fade in selected subcontent
    $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
  });
});
</script>

<style type="text/css">
 div.subcontent { display:none; }
</style>

在同一页面中使用jquery加载多个内容

1 个答案: