Question

I'm trying to show a php page which comes by clicking on <a href="xyz.php"> from left side menu on a specific div named id="portfolio" on same page. I've searched alot but didn't get people working, as some says convert your page to html and separate the php code to a separate file. but the problem is I've whole project and so many php pages so this method will take time. Is there any way to do this using target html method in <a href="" target="portfolio"> so when user click of a it will target the url to portfolio div or something like this or I've to use Jquery for this purpose ???

My code is:

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script src="/dist/scripts.min.js"></script>

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">



 <div class="main">
 <div class="nav-side-menu">
 <div class="brand">Brand Logo</div>


    <div class="menu-list">

        <ul id="menu-content" class="menu-content">
            <li>
              <a href="#">
              <i class="fa fa-dashboard fa-lg"></i> Dashboard
              </a>
            </li>

            <li  data-toggle="collapse" data-target="#products" class="collapsed active">
              <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
            </li>
            <ul class="sub-menu collapse" id="products">
                <li class="active"><a href="#">CSS3 Animation</a></li>
                <li><a href="#">General</a></li>
                <li><a href="xyz.php">Buttons</a></li>
                <li><a href="xyz.php">Tabs & Accordions</a></li>
                <li><a href="xyz.php">Typography</a></li>
                <li><a href="xyz.php">FontAwesome</a></li>
                <li><a href="xyz.php">Slider</a></li>
                <li><a href="xyz.php">Panels</a></li>
                <li><a href="xyz.php">Widgets</a></li>
                <li><a href="xyz.php">Bootstrap Model</a></li>
            </ul>



        </ul>
 </div>

 </div>

 <div class="portfolio"><h1>My Page</h1></div>
 </div>

Style.css

.nav-side-menu {
 overflow: auto;
 font-family: verdana;
 font-size: 12px;
 font-weight: 200;
 background-color: #2e353d;
 position: fixed;
 top: 0px;
 width: 300px;
 height: 100%;
 color: #e1ffff;
 }
.portfolio {
 background-color:#F3F3F3 ;
 position: absolute;
 top: 0;
 left: 300px;
 right: 0;
 bottom: 0;
 display:inline-block;
 -moz-transition: left 0.5s ease;
  transition: left 0.5s ease;
  } 
  .collapse-expand {
   background-color: #d9d9d9;
   border-top-color: #d9d9d9;
   -moz-transition: left 0.5s ease;
   transition: left 0.5s ease;
   }
  .collapse-expand {
   position: fixed;
   height: 35px;
   bottom: 0;
   width: 300px;
   border-right: 1px solid #e4e4e4;
   border-top: 1px solid #bbbabb;
   background-color: #d9d9d9;
   cursor: pointer;
   -moz-transition: left 0.5s ease;
   transition: left 0.5s ease;
   }
  .fa-angle-left
   {
  padding-left: 95px;
padding-top: 5px;
/*-moz-transition: left 0.5s ease;
transition: left 0.5s ease;*/
}

.nav-side-menu .brand {
 background-color: #23282e;
 line-height: 50px;
 display: block;
 text-align: center;
 font-size: 14px;
 }

 .nav-side-menu ul,
 .nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
 line-height: 35px;
 cursor: pointer;

  }
 .nav-side-menu ul :not(collapsed) .arrow:before,
 .nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f0da";
  display: inline-block;
    padding-left: 10px;
  padding-right: 10px;
   vertical-align: middle;
  float: right;
   }
  .nav-side-menu ul .active,
  .nav-side-menu li .active {
   border-left: 3px solid #d19b3d;
  background-color: #4f5b69; 
   }
 .nav-side-menu ul .sub-menu li.active,
 .nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
   }

 body {
margin: 0px;
padding: 0px;
}

Here is my Js Fiddle 工作

Answer 1

您可以使用iFrame或JQuery的.load()方法

$('a[data-async-load]').click(function(e) { e.preventDefault(); var externalUrl = $(this).attr('data-async-load'); alert(externalUrl); // Replace the with .load() method })：https://www.w3schools.com/tags/tag_iframe.asp

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="sample3.php">Do't load async</a> <a data-async-load="sample1.php" href>Load Async 1</a> <a data-async-load="sample2.php" href>Load Async 2</a>：http://api.jquery.com/load/

<强>被修改

处理点击

＆＃13;

Toolbar

＆＃13;

SupportActionBar

＆＃13;

Answer 2

使用此Link中描述的.load()完成此操作。这是我的工作 JS Fiddle

目标<a href="xyz.php"> to a specific div on the php page without redirecting the php page

2 个答案: