引导导航条链接和JavaScript -无法读取property 'slice'& # 39;未定义#

Bootstrap navbar link and JavaScript - Cannot read property 'slice' of 'undefined'

本文关键字：property slice 未定义 读取 导航 链接 JavaScript      更新时间：2023-09-26

我正试图用bootstrap和JS做一些简单的事情。我有一个BS导航条与两个链接- add和edit。当我点击这两个链接中的一个时，我只是想更改add和edit各自divs中显示的内容，但这不起作用。我得到一个cannot read property 'slice' of undefined错误。

以下是HTML和BS: 

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="menu nav navbar-nav">
        <li class="menu-btn active"><a href="#add">Add Product<span class="sr-only">(current)</span></a></li>
        <li class="menu-btn"><a href="#edit">Edit Product</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  <div class="menu-content add">add</div>
  <div class="menu-content edit">edit</div>

这里是JS:

var $content = $('.menu-content');
    function showContent(type) {
      $content.hide().filter('.' + type).show();
    }
    $('.menu').on('click', '.menu-btn', function(e) {
      var a = e;
      console.log(a);
      showContent(e.currentTarget.hash.slice(1));
      e.preventDefault();
    });
   showContent('add');

任何帮助将不胜感激。

所以，我做了一些小改动:

Bootstrap: 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="menu nav navbar-nav">
        <li class="active"><a class="menu-btn" href="#add">Add Product<span class="sr-only">(current)</span></a></li>
        <li><a class="menu-btn" href="#edit">Edit Product</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  <div id="add" class="menu-content">add</div>
  <div id="edit" class="menu-content">edit</div>

JS: 

  var $content = $('.menu-content');
function showContent(selector) {
  $content.hide();
  $(selector).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
  showContent(e.currentTarget.hash);
  e.preventDefault();
});
// show '#about' content only on page load (if you want)
showContent('#add');

希望这对将来的人有帮助

相关文章：