Question

当我使用jquery load（）在div中加载内容时，带有drowpdown菜单的bootstrap navbar停止工作。此外，导航栏背景颜色已更改为原始颜色，即css无法正常工作。我知道问题出在div id = tabs中，因为我删除它并且我再次正常工作。

html

<nav  class="navbar navbar-inverse"> 
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">ULCHEMDB
      </a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"  >Home</a></li> 
        <li><a href="#">About</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Search <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Quick Search</a></li>
            <li><a href="#">Advanced Search</a></li>
            <li><a href="#">Structure Search</a></li>
          </ul>
        </li>
        <li><a href="#">Tools</a></li>
        <li><a href="#">Help</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
          <form class="navbar-form navbar-left" role="search"> 
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Try quick search">
            </div>
            <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
          </form>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>



<div class="container">
  <div class="row"> 
  <div class="col-md-3" >

     <div id='cssmenu'>
<ul>
   <li class='active'><a href='#' data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp" ><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#' data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"><span>Project</span></a></li>
         <li class='last'><a href='#' data-url="#homePage> *"><span>Team</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#' data-url="http://localhost/bioinformatica/Main_page/Main_page%20(5)#cssmenu"><span>News</span></a></li>
   <li class='has-sub'><a href='#'><span>Search</span></a>
      <ul>
         <li><a href='#'><span>Quick Search</span></a></li>
         <li><a href='#'><span>Advanced Search</span></a></li>
         <li class='last'><a href='#'><span>Structure Search</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Tools</span></a>
      <ul>
         <li><a href='#'><span>NAMS</span></a></li>
         <li><a href='#'><span>Smiles Calculator</span></a></li>
         <li class='last'><a href='#'><span>Empty</span></a></li>
      </ul>
   </li>
</ul>
</div> 
    </div>

    <div class="col-md-9">
      <!-- <div  style="background:silver" class="jumbotron"> -->  <!-- eu adicionei o style background silver mas pode-se apagar e fca com a cor original -->
    <div id="tabs">
    <ul class="nav nav-tabs" id="prodTabs">
        <li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
        <li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
        <li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab_quick" class="tab-pane active"></div>
        <div id="tab_advanc" class="tab-pane active"></div>
        <div id="tab_struct" class="tab-pane active"></div>
    </div>
</div>

  </div>
    </div>

的javascript

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
} )( jQuery );




$( document ).ready(function() {
$('#tab_quick').load($('#tabs .active a').attr("data-url"),function(result){
  $('.active a').tab('show');
});

$('#tabs a').click(function (e) {
    e.preventDefault();

    var url = $(this).attr("data-url");
    var href = this.hash; 
    var pane = $(this);

    // ajax load from data-url
    $(href).load(url,function(result){      
        pane.tab('show');
    });

});
});



$( document ).ready(function() {    
    $('#cssmenu a').click(function (e) {
        e.preventDefault();

        var url = $(this).data('url'); 
        var pane = $(this);

        // ajax load from data-url
        $('#tabs').load(url, function(result){ // load the content directly to #tabs     
            pane.tab('show'); // display the tab
        });   
    });
});

CSS

.navbar { 
    background-color: #C0C0C0  ;

}

谢谢！

jquery load（）禁用bootstrap下拉菜单

0 个答案: