【前端】bootstrap4实现导航栏(非nav)

效果展示:
在这里插入图片描述
html代码:

 <!-- 右侧边栏 -->
	<div class="list-group">
    	<!-- 右侧边栏的标题,设置为div,不能设置为可以点击的button -->
		<div class="list-group-item black-fenlei-div"> 
			<p class="list-group-item-heading">分类</p>
		</div>
		<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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值