Question

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

<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');
        }

    });

});

Answer 1

该ID必须以a-z或A-Z开头，并且不能以#开头。

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

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

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></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>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#bulletins_tab">Bulletins</a>
    <a class="dropdown-item" href="#events_tab">Events</a>
    <a class="dropdown-item" href="#jobs_tab">Jobs</a>
  </div>
</div>
<div class="tab-content">
    <div id="bulletins_tab" class="tab-pane active">
      <h3>bulletins</h3>
    </div>
    <div id="events_tab" class="tab-pane">
      <h3>events</h3>
    </div>
    <div id="jobs_tab" class="tab-pane">
      <h3>jobs</h3>
    </div>
  </div>

TypeError：无法读取选项卡上未定义的属性“ nodeName”

1 个答案: