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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/diyinqian/article/details/83472177

效果展示：

html代码：

 <!-- 右侧边栏 -->
	<div class="list-group">
		<button class="list-group-item all-type-div">
			<p class="list-group-item-heading">分类</p>
		</button>
		<button id="quanbu" ng-click="showAllPassages('全部')" class="list-group-item active">
			<p class="list-group-item-heading">全部</p>
		</button>
		<button id="tigang" ng-click="showAllPassages('提纲')" class="list-group-item">
			<p class="list-group-item-heading">提纲</p>
		</button>
		<button id="guandian" ng-click="showAllPassages('观点')" class="list-group-item">
			<p class="list-group-item-heading">观点</p>
		</button>
		<button id="qita" ng-click="showAllPassages('其他')" class="list-group-item">
			<p class="list-group-item-heading">其他</p>
		</button>
		<button id="wdsc" ng-click="showAllPassages('我的收藏')" class="list-group-item">
			<p class="list-group-item-heading">我的收藏</p>
		</button>
	</div>

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