使用jquery或php在div中加载页面

时间:2016-04-20 22:44:05

标签: php jquery

我创作了一支手风琴和div。手风琴正在发挥作用。我想把php文件放在div中。当我点击列表链接时,我想在div上显示页面内容。我该如何追踪?有另一种方式吗?您可以看到https://jsfiddle.net/y8fuwtg6/1/

    <div style="width:200px; float:left; margin:20px 20px;">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              List1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <a href="index1.php">
              List1
            </a>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              List2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <a href="index2.php">
              List2
            </a>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              List3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            <a href="index3.php">
              List3
            </a>
          </div>
        </div>
     </div>
</div>
<div id="test" style="width: 150px; min-height:200px; background-color: #cdcdcd; margin:20px 20px; height: auto; display:inline-block;">     
</div>

1 个答案:

答案 0 :(得分:1)

我解决了我的问题。我只是用了一个脚本。 İt可以用ajax解决。也许这个文件可以帮助别人。

        <!DOCTYPE html>
    <html>
    <head>
            <title></title>
            <link rel="stylesheet" href="css/bootstrap.min.css" >
            <link rel="stylesheet" href="css/bootstrap-theme.min.css" >
            <script src="js/jquery.js"></script>
            <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
            <div style="width:400px; float:left;">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                              <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                      List1
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                              <div class="panel-body">
                                    <a href="homepage.php">
                                      List1
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                      List2
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                    <a href="computer.php">
                                      List2
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                      List3
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                              <div class="panel-body">
                                    <a href="electronic.php">
                                      List3
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingFour">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                      List4
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                              <div class="panel-body">
                                    <a href="phone.php">
                                      List4
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingFive">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                      List5
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                              <div class="panel-body">
                                    <a href="books.php">
                                      List5
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingSix">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                      List6
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
                              <div class="panel-body">
                                    <a href="services.php">
                                      List6
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingSeven">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                      List7
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
                              <div class="panel-body">
                                    <a href="contact.php">
                                      List7
                                    </a>
                              </div>
                            </div>
                      </div>
                      <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingEight">
                              <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                                      List8
                                    </a>
                              </h4>
                            </div>
                            <div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
                              <div class="panel-body">
                                    <a href="about.php">
                                      List8
                                    </a>
                              </div>
                            </div>
                      </div>          
                    </div>
    </div>
        <div id="test" style="width: 600px; background-color: #cdcdcd; margin-left: 20px; height: auto; display:inline-block;">
        </div>
        <script>
               $(".panel-body a").click(function(){
               var x=$(this).attr("href");
               $("#test").load(x);    
               return false;
            });  

        </script>
    </body>
    </html>