Bootstrap模板Metronic设置默认选中侧边栏

一开始我们拿到的模板页面如下图所示,但是在给出的模板中,每个页面都包含了左侧的侧边栏代码,这在我们开发系统的时候,显然不能这么做,不利于变更,重复性也很大,但是如果是放在一个文件中统一包含进来的话,就涉及到要如何让侧边栏正确选中当前页面的链接,而不是人工的却设置tab的开关。

通过看模板的源码,发现了一个函数setSidebarMenuActiveLink,在侧边栏的选项链接中,为每个链接设置一个ID,代码如下所示:

<li class="start active open">
	<a href="javascript:;">
		<i class="icon-home"></i>
		<span class="title">股票</span>
		<span class="selected"></span>
		<span class="arrow open"></span>
	</a>
	<ul class="sub-menu">
		<li class="">
			<a href="${pageContext.request.contextPath}/index" id="gpsj_page">
				<i class="icon-bar-chart"></i>
				股票数据
			</a>
		</li>
		<li class="">
			<a href="${pageContext.request.contextPath}/gp/jyfw" id="jyfw_page">
				<i class="icon-bar-chart"></i>
				经营范围
			</a>
		</li>
		<li class="">
			<a href="${pageContext.request.contextPath}/gp/k_line" id="gp_kline_page">
				<i class="icon-bar-chart"></i>
				股票k线图
			</a>
		</li>
		<li class="">
			<a href="${pageContext.request.contextPath}/common/hotWords.jsp" id="common_hot_words_page">
				<i class="icon-bar-chart"></i>
				热搜词
			</a>
		</li>
	</ul>
</li>

,然后在每个页面加载的时候, 加上一句 Layout.setSidebarMenuActiveLink(‘set‘, $(‘#common_hot_words_page‘));即可解决。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-01 06:58:25

Bootstrap模板Metronic设置默认选中侧边栏的相关文章

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

Dojo Tree设置默认选中项并且获得它

在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码 $("#info").html("(您的浏览器的分辨率为:&qu

vue中select的使用以及select设置默认选中

简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句提示,试了一下发现居然还有这种隐藏属性.所以,我决定自己写下来,讲清楚. 解决过程 html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name

iview-select选择器组件的使用&amp;设置默认选中的值

一,Select选择器使用 html <Select v-model="model15" prefix="ios-home" style="width:200px"> <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name }}</Option> <

单选框radio总结(获取值、设置默认选中值、样式)

<div class="radio-inline"> <input type="radio" name="killOrder" value="1"/> <label for="killOrder1">是</label> </div> <div class="radio-inline"> <input type=

html中&lt;radio&gt;单选按钮控件标签用法解析及如何设置默认选中

<input type="radio" name="radio" value="1">单选1 <input type="radio" name="radio" value="2">单选2 <input type="radio" name="radio" value="3" checked>单选

JS向页面select添加元素 设置默认选中并移除点击下拉事件

$("#major").append(""+'运输工程监理'+""); $("#major option[value='运输工程监理']").prop("selected",true); $("#major").attr("disabled","disabled"); PS:$("#major").removeAttr(&quo

jQuery设置 select、radio、checkbox 默认选中的值

[javascript] view plain copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

UITableView&amp;UICollectionView设置单元格的默认选中状态

1. 场景需求 一个表格视图(或者宫格视图)中,当一个单元格被选中时设置彩色样式,选中其它单元格时设置灰色样式. 2. 一个思路 通过实现选中和非选择的代理,以在适当的时机进行UI更新操作. 3. UITableView 3.1 通过屏幕点击改变的选中状态回调给代理 //选中-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath;//非选中-(void)tableView:(