javascript - 使用 json 的 Bootstrap 4 导航栏
问题描述
我想使用 bootstrap 4 导航栏创建导航栏,并且我想使用 json 在其中添加项目。
我尝试了一些想法,并在谷歌上搜索了一些想法,但没有很多人尝试过,所以我想也许这里有人可以帮助我。
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav results_buttons">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
JS
$(document).ready(function () {
$.getJSON('events.json', function (data) {
var results_buttons = '';
$.each(data, function (key, value) {
results_buttons += '<ul>';
results_buttons += '<li">' + value.name + '</li>';
results_buttons += '</ul>';
});
$('#results_buttons').append(results_buttons);
});
});
JSON
[
{
"id" : "1",
"name" : "100m"
},
{
"id" : "2",
"name" : "Long Jump"
},
{
"id" : "3",
"name" : "Shot Put"
},
{
"id" : "4",
"name" : "High Jump"
}
]
理想的结果应该看起来像正常的 bootstrap 4 菜单,但从 json 获取信息。
解决方案
您的导航栏无效id
。不应该有空格:
<div class="collapse navbar-collapse" id="navbarNav results_buttons">
所以假设正确的id
是navbarNav
,这里有一个工作演示:
// Make sure to point to the proper JSON file. Here I used CodePen for demo purposes.
$.getJSON( 'https://codepen.io/anon/pen/QPvNQg.html', function( data ){
var $menu = $( '#navbarNav ul.navbar-nav' );
$.each( data, function(){
var url = this.url || '#';
$menu.append(
'<li class="nav-item">' +
'<a class="nav-link" href="' + url + '">' + ( this.name || this.id ) + '</a>' +
'</li>'
);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
推荐阅读
- java - 启用 CORS 支持 Spring Boot
- javascript - 如何使用 i18n 定义 Currency-per-Kg 数字格式?
- javascript - window.open 打开一个弹出窗口而不是一个新窗口
- php - 我无法使用 Auth::attempt php laravel 登录
- sql - 在条件不匹配的地方显示 0
- flutter - flutter just_audio中音频标题之间的疑问
- python - 使用用户输入设置 Pygame 显示大小
- mysql - mysql join 性能慢
- android - 当连接未正确关闭时,为什么使用 WAL 模式的 SQLite 数据库中的数据会丢失?
- python-3.x - 从多个混合参数返回一个列表