【前端】bootstrap4实现导航栏（非nav）

效果展示：

html代码：

 
	

    	
		
 
			
分类
		
		
			
全部
		
		
			
提纲
		
		
			
观点
		
		
			
其他
		
		
			
我的收藏
		
	

js代码：

	$scope.showAllPassages = function(type){
		changeActive(type);
		alert(type);
	}
	
	changeActive = function(type){
		/*去掉active*/
		 $(".list-group button").click(function() {
		        $(".list-group button.active").removeClass("active")
		        $(this).addClass("active");
		    })
		/*添加active*/
		switch (type){
			case "全部":
		        $("#quanbu").addClass("active");
		        break;
			case "提纲":
		        $("#tigang").addClass("active");
		        break;
			case "观点":
		        $("#guandian").addClass("active");
		        break;
			case "其他":
		        $("#qita").addClass("active");
		        break;
			case "我的收藏":
		        $("#wdsc").addClass("active");
		        break;
		    default:
		        $("#quanbu").addClass("active");
		    	break;
		}
	}	

css代码：

/*右侧导航栏的每个小条目*/
.list-group-item{
	width:80px;
	height:50px;
	word-wrap:break-word;	
    margin: 1px;
    padding: 9px;
    text-align: -webkit-center;
}

/*给每个小栏目的字设置字号，诸如"全部"“提纲”“观点”等字*/
.list-group-item-heading{
	font-size: 14px;
}

/*设置黑色的“分类”样式*/
.black-fenlei-div{
	background-color: rgba(102, 102, 102, 1);
	font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
}