Javascript 单击不起作用的按钮时在选项卡中加载新内容

单击按钮时，我正在尝试将内容加载到选项卡中。但是下面的代码将我带到第一个选项卡

HTML代码：

    <div class="tabbable">  
      <ul class="nav nav-tabs">  
        <li class="active"><a href="#overview" >Overview</a></li>
        <li class=""><a href="#site" >Manage Sites</a></li>  
        <li class="" style="display:none;"><a href="#department" >Departments</a></li>  
     </ul>
   </div> 



     <div class="tab-pane" id="site">  
        <div class="container center">
            <h3 class="center">Sites Management</h3>
            <tr>
            <td><input type="text" class="form-control name"   id="site_name{ID}" value="{NAME}">/td>

           <button type="button" class="btn btn-default btn-sm dropdow`enter code here`n-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#dept-container" class='manageDepartments' id='{ID}'>Manage departments</a></li> 
        </ul>
        </td>
     </tr>
        </div>        
    </div>


<div class="tab-pane" id="department">  
        <div class="container center" id="dept-container">
            <h3 class="center">Departments Management</h3>

        </div>        
    </div>

谁能告诉我这里怎么了

---

提前感谢

您正在尝试加载anchor dept容器，因为它是一个实际的容器，所以jquery正在监听它。您可以尝试event.preventDefault和event。stopPropagation@Jim：它实际上是一个有效的url。看见

 $('.manageDepartments').on( 'click', function( event ) {       

            event.preventDefault();
            $("#site").html($($(this).attr("href")).html()); 

});

 $('.manageDepartments').on( 'click', function( event ) {       

            event.preventDefault();
            $("#site").html($($(this).attr("href")).html()); 

});