堆栈内存溢出
  繁体   English   中英

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

[英]Page load in div with jquery or php

 原文  2016-04-20 22:44:04  3   1    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 个解决方案

解决方案1
 1 已采纳  2016-04-21 23:16:52

我解决了我的问题。 我只是用了一个脚本。 İ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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery和AJAX将PHP页面加载到div中？ 使用jQuery在div中加载PHP页面 使用Shadowbox jQuery在div中加载PHP页面时出现问题 jQuery .load 返回空 div（PHP 页面） 如何使用jQuery在div中加载php页面 使用jquery ajax将php页面输出加载到html div中 使用jQuery或PHP从另一个页面加载第一个div 使用JavaScript在div上加载php页面 使用ajax和jquery将数组发送到codeigniter（php）控制器，并在现有已加载页面上加载页面（在任何div中） 页面上的jQuery框在php上加载
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM