TypeError:无法读取选项卡上未定义的属性'nodeName'

问题描述 投票:0回答:1

我正在尝试使用下拉菜单显示标签。选项卡工作正常,但错误仍然存​​在,并且当我在下拉列表中选择选项卡菜单时,它没有关闭下拉菜单,但显示了相应的选项卡,并显示了错误。

                <div class="dropdown">
                  <button class="btn dropdown-toggle dropdown-tabs" style="background-color: #fdcd3d; color: #000;" type="button" data-toggle="dropdown">Achievers
                  <span class="caret"></span></button>
                <ul class="dropdown-menu" id="myTab" role="tablist">
                  <li id="#achiever" name="Achievers">
                    <a class="dropdown-link" name="#achiever" data-toggle="tab" href="#achiever" role="tab" aria-controls="home" aria-expanded="true">Achievers</a>
                  </li>
                  <li id="#articles" name="Articles">
                    <a class="dropdown-link" name="#articles" data-toggle="tab" href="#articles" role="tab" aria-controls="profile">Articles</a>
                  </li>
                  <li id="#bulletins" name="Bulletins">
                    <a class="dropdown-link" data-toggle="tab" role="tab" aria-controls="profile">Bulletins</a>
                  </li> 
                  <li id="#events" name="Events">
                    <a class="dropdown-link" data-toggle="tab" href="#events" role="tab" aria-controls="profile">Events</a>
                  </li>           
                  <li id="#jobs" name="Jobs">
                    <a class="dropdown-link" data-toggle="tab" href="#jobs" role="tab" aria-controls="profile">Jobs</a>
                  </li>               

                </ul>
                </div>

我的js下拉菜单的代码

          $(document).ready(function(){

            $('.dropdown-menu > li > a').click(function(e){
              var id = $(this).parent().attr('id');
              var text = $(this).parent().attr('name');
              // var tab = $('.tab-pane').attr('id');
              e.preventDefault();
              $('.dropdown-tabs').text(text);

                if(id != null){
                    $('a[href="' + id + '"]').tab('show');
                }

            });

          });
php jquery bootstrap-4
1个回答
0
投票

ID必须以a-zA-Z开头,并且不能以#开头。

然后在$('a[href="' + id + '"]').tab('show');中,您需要更改为$('a[href="#' + id + '"]').tab('show');

$(document).ready(function(){
  $('.dropdown-menu > li > a').click(function(e){
    var text = $(this).text();
    $('.dropdown-toggle').text(text);
    $(this).tab('show');
    $(this).parent().removeClass("active");
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn dropdown-toggle" style="background-color: #fdcd3d; color: #000;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Bulletins
    <span class="caret"></span>
  </button>
<ul class="dropdown-menu">
    <li><a href="#bulletins_tab">Bulletins</a></li>
    <li><a href="#events_tab">Events</a></li>
    <li><a href="#jobs_tab">Jobs</a></li>
</ul>
</div>
<div class="tab-content">
    <div id="bulletins_tab" class="tab-pane fade in active">
      <h3>bulletins</h3>
    </div>
    <div id="events_tab" class="tab-pane fade">
      <h3>events</h3>
    </div>
    <div id="jobs_tab" class="tab-pane fade">
      <h3>jobs</h3>
    </div>
  </div>
© www.soinside.com 2019 - 2024. All rights reserved.