dropmenuでIDを持つ要素を参照する方法

Question

このスクリプトで私を助けてください。私は、ドロップダウンメニューにいくつかのPHPコードをリンクしようとしているが、私は何の反応を得ていない....

コードは次のとおりです。

JSコード：

function loadDoc1() { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("show2").innerHTML = this.responseText; 
      } 
     }; 
     xhttp.open("GET","user_manag.php",true); 
     xhttp.send(); 
    } 

    $(document).ready(function() { 
     $("#a2").click(function() { 
      $("#show2")".load("user_manag.php",function(responseTxt, statusTxt, xhr) { 
       if(statusTxt == "success") 
        alert("External content loaded successfully!"); 
       if(statusTxt == "error") 
        alert("Error: " + xhr.status + ": " + xhr.statusText); 
      }); 
     }); 
    }); 

HTMLマークアップ：

<nav class="navbar navbar-inverse" style="border:4px solid white"> 
    <div class="container-fluid"> 
    <div class="navbar-header" style="margin-top:5px;"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="http://www.april-romania.ro"><img src="logo1.jpg" style="width:40px;height:40px;"></a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav" > 
     <li><a href="#"><span class="glyphicon glyphicon-search"></span>Search</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">ADMIN 
      <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a id="a1" href="#" action="loadDoc1()">User management</a></li> 
      <li><button id="button1">User management</button></li> 
      <li><a id="a2" href="#">Log report</a></li> 
      <li><a href="#">Change caseID</a></li> 
      <li><a href="#">Code tables</a></li> 
      </ul> 
     </li> 
</div> 
<div class="container-fluid text-center"> 
    <div class="row content"> 
    <div class="col-sm-1 sidenav" style="border: 4px solid white";> 

    </div> 

    <div id="show2" class="col-sm-8 text-left" style="background-color:rgb(200,200,200);border: 4px solid white; height: 100%"> 
      hereeeeeeeeee 

    </div> 
    <div class="col-sm-3 sidenav" style="background-color:gray;border: 4px solid white"> 

    </div> 
    </div> 
</div> 

user_manag.phpは次のとおりです。

<?php 

echo "user management"; 

?> 

私はメニューのリンクの1つにアクセスすると<div>#swow2のコンテンツを変更しようとしています....私はjQuery、属性アクション、onclick、リンク、ボタンを使ってajax、jQueryを試しました....作業。私はそれがメニューの 'a'または 'button'要素に与えたIDを認識しないと思う。

Answer 1

あなたのHTMLには、複数のの終了タグがありません。です。コメントに指摘されているように、JSにもエラーがあります。ここでは、クリーンスクリプトは（今それが動作する）である：

HTML & JS

<nav class="navbar navbar-inverse" style="border:4px solid white"> 
    <div class="container-fluid"> 
    <div class="navbar-header" style="margin-top:5px;"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="http://www.april-romania.ro"><img src="logo1.jpg" style="width:40px;height:40px;"></a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav" > 
     <li><a href="#"><span class="glyphicon glyphicon-search"></span>Search</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">ADMIN<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a id="a1" href="#" action="loadDoc1()">User management</a></li> 
      <li><button id="button1">User management</button></li> 
      <li><a id="a2" href="#">Log report</a></li> 
      <li><a href="#">Change caseID</a></li> 
      <li><a href="#">Code tables</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div class="container-fluid text-center"> 
    <div class="row content"> 
    <div class="col-sm-1 sidenav" style="border: 4px solid white"></div> 
    <div id="show2" class="col-sm-8 text-left" style="background-color:rgb(200,200,200);border: 4px solid white; height: 100%"> 
      hereeeeeeeeee 
    </div> 
    <div class="col-sm-3 sidenav" style="background-color:gray;border: 4px solid white"></div> 
    </div> 
</div> 

<script> 
function loadDoc1() { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("show2").innerHTML = this.responseText; 
      } 
     }; 
     xhttp.open("GET","user_manag.php",true); 
     xhttp.send(); 
    } 

    $(document).ready(function() { 
     $("#a2").click(function() { 
      $("#show2").load("user_manag.php",function(responseTxt, statusTxt, xhr) { 
       if(statusTxt == "success") 
        alert("External content loaded successfully!"); 
       if(statusTxt == "error") 
        alert("Error: " + xhr.status + ": " + xhr.statusText); 
      }); 
     }); 
    }); 
</script>