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

时间:2014-07-16 15:33:26

标签: javascript jquery html

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

HTML CODE:

    <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>

Jquery:

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

            var urlLinks = $(this).attr("href"); 
            $("#site").load(urlLinks); 

});

谁能告诉我这里有什么问题?

提前致谢

1 个答案:

答案 0 :(得分:0)

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

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

});