php - TypeError:无法读取未定义选项卡上的属性“nodeName”
问题描述
我正在尝试使用下拉菜单显示选项卡。选项卡工作正常,但错误仍然存在,当我在下拉菜单中选择选项卡菜单时,它不会关闭下拉菜单,但会显示相应的选项卡并显示错误。
<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');
}
});
});
解决方案
id 必须以a-z
orA-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>
推荐阅读
- spring - Spring Cloud Stream Rabbit 监听器(消费者)条件
- solidity - 何时(何时不)在 Solidity 中使用 new 关键字
- c# - ImplicitWait 不起作用 C# Appium WinAppDriver
- swift - 如何在键盘外观上向上移动整个视图,包括选择器视图
- c++ - 如何在 C++ 中将整数文件读入二维整数数组?
- javascript - 将两个不同选择函数中的 ID 传递给 jQuery 中的 1 个 const 函数?
- java - 使用我的 Spring Boot 应用程序运行 Azure Application Insights 代理时,我不断收到 IllegalStateException
- python - django 数据库错误错误的打印选择字段
- nlp - 从文本中提取难词
- r - 基本问题:如何为绘图中的线条添加颜色