Question

我是jQuery的初学者。很抱歉这样一个非特定的问题，只是不确定要具体询问什么。

我有这个效果很好的脚本。它使用链接并在另一个div位置加载信息。

这是脚本：

        <div id="menu">
               <li id="link1">
                   <a class="" href="#"id="link01">link01</a>
               </li>

               <li id="link2">
                   <a class="" href="#"id="link02">link02</a>                     
               </li>
        </div>



        <div class="somthing">
          <div id="page1" class="content">
            <h1>Page 1</h1>
            <p>First section of content.</p>
          </div>
          <div id="page2" class="content">
            <h1>Page 2</h1>        
            <p>Second section of content</p>
          </div>
          <div id="page3" class="content">        
            <h1>Page 3</h1>
            <p>Third section of content.</p>
          </div>                 
        </div>



        <script type="text/javascript">
            $('#menu a').click(function(e){
                 hideContentDivs();
                 var tmp_div = $(this).parent().index();
                 $('.somthing div').eq(tmp_div).show();
              });

            function hideContentDivs(){
                $('.somthing div').each(function(){
                $(this).hide();});
            }
            hideContentDivs();
        </script>

但我希望能够像这样设置我的菜单。但它将标题视为项目。如何让下面的每个链接工作并加载回溯div信息。

        <div id="menu">
               <p class=""><span class="">header 01</span></p>
               <li id="link1">
                   <a class="link-text material_link_container" href="#"id="link1">link1</a>
               </li>

               <li id="link2">
                   <a class="link-text material_link_container" href="#"id="link2">link2</a>                      
               </li>

               <p class=""><span class="">header 02</span></p>
               <li id="link3">
                   <a class="link-text material_link_container" href="#"id="link3">link3</a>
               </li>

               <li id="link4">
                   <a class="link-text material_link_container" href="#"id="link4">link4</a>                      
               </li> 

               <p class=""><span class="">header 03</span></p>
               <li id="link5">
                   <a class="link-text material_link_container" href="#"id="link5">link5</a>
               </li>

               <li id="link6">
                   <a class="link-text material_link_container" href="#"id="link6">link6</a>                      
               </li> 
        </div>

谢谢。

Answer 1

使用此代码并将“您的文件网址”替换为文件以从中获取内容。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("your file url");
    });
});
</script>
</head>
<body>

<div id="div1"></div>

<button>load file</button>

</body>
</html>

jQuery从链接加载信息到div

1 个答案: