您的位置：首页 > Web前端 > BootStrap

JS中BootStrap效果的运用——切换导航栏选项卡

2019-01-08 20:37 501 查看
版权声明：进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86097086

描述：

JS中BootStrap效果的运用——导航栏选项卡的切换

加入了JavaScript代码对其进行选择的判定，改变其className，设置对应属性

主要是引用文件，教程https://blog.csdn.net/qlwangcong518/article/details/86032763

效果：

 

代码：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div class="col-lg-4">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">商城</a></li>
<li><a href="#">购物车</a></li>
</ul>
</div>

<script>
var ul=document.querySelector("ul");
var N=ul.firstElementChild;
ul.addEventListener("click",clickHandler);
function clickHandler(e) {
if(e.target instanceof HTMLUListElement) return;
if(e.target instanceof HTMLLIElement) return;
if(N){
N.className="";
}
N=e.target.parentElement;
N.className="active";

}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航