冯 海

一个程序新人菜鸟的日记,希望大家多多关照。QQ:32316131

JS 对bootstrap标签自动赋值avctive

我在mvc 的布局页面中引入了bootstrap的标签页面,

但想在不同的页面中,自动激活其选项。

 

 

如是文章的栏目进来,自动文章这个标签为选中状态。

我使用的是bootstrap现成的标签。

在母版中这样写

<div class="navbar navbar-default  navbar-fixed-top">
		<div class="row">
		   @if (Request.IsAuthenticated)
		   {
			   using (Html.BeginForm("LogOff", "User", FormMethod.Post, new { id = "logoutForm" }))
			   {
				@Html.AntiForgeryToken()


				<div class="container">
					<div class="col-md-1 col-sm-2 col-xs-3">
						<div class="dropdown toprow">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:#000000;font-weight:bold;font-size:18px;">
								@User.Identity.GetUserName()<span class="caret"></span>
							</a>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

								<li><a href="~/MyWeb/Index/@User.Identity.GetUserId()">我的主页</a></li>
								<li><a href="javascript:document.getElementById('logoutForm').submit()">注销</a></li>
							</ul>
						</div>
					</div>
					<div class="col-md-10 col-sm-10 col-xs-9 toptitle">
						<!-- Nav tabs -->
						<ul id="myTab" class="nav nav-tabs navbar-default">
							<li id="myweb1"><a href="#home1" data-toggle="tab"  style="padding:10px 7px;">首页</a></li>
							<li  id="myweb2"><a href="#ios" data-toggle="tab"  style="padding:10px 7px;">信息</a></li>
							<li id="myweb3"><a href="#ios2" data-toggle="tab"  style="padding:10px 7px;">文章</a></li>
							<li  id="myweb4"><a href="#ios3" data-toggle="tab"  style="padding:10px 7px;">沟通</a></li>
						</ul>
					</div>
				</div>
			   }
		   }
		   else
		   {

			@*<li>@Html.ActionLink("注册", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>*@
			@Html.ActionLink("登录", "Login", "User", routeValues: null, htmlAttributes: new { id = "loginLink" })
			}

 
			    
		</div>
		<div class="container">
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade" id="home1">
					<div class="navbar-header">
						<ul class="nav nav-pills">
						 	<li><a href="~/Home/Index" style="padding:10px 10px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>回首页</a></li>
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>图表管理</a></li>
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>分析管理</a></li>
						  </ul>

					</div>
				</div>
				<div class="tab-pane fade" id="ios">

					<div class="navbar-header">

						<ul class="nav nav-pills">
						 
							<li><a href="~/MyWeb/MyCmsList/" style="padding:10px 10px;"><span class="glyphicon glyphicon-book" aria-hidden="true"></span>sdf</a></li>
							<li><a href="~/MyWeb/AddCms/" style="padding:10px 10px;"><span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>fdfd</a></li>
							 
						</ul>

					</div>
				</div>
				<div class="tab-pane fade" id="ios2">

					<div class="navbar-header">

						<ul class="nav nav-pills">
							<li><a href="~/MyWeb/MyCmsList/" style="padding:10px 10px;"><span class="glyphicon glyphicon-book" aria-hidden="true"></span>我的文章</a></li>
							<li><a href="~/MyWeb/AddCms/" style="padding:10px 10px;"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>要发表</a></li>

						</ul>

					</div>
				</div>
				<div class="tab-pane fade" id="ios3">

					<div class="navbar-header">

						<ul class="nav nav-pills">
						 
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;">主页</a></li>
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;">通知</a></li>
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;">文章</a></li>
							<li><a href="~/MyWeb/Index/" style="padding:10px 10px;">沟通</a></li>
							 

						</ul>

					</div>
				</div>
			</div>
			 
		</div>
	</div>

  

然后在使用的页面中对动起来个赋值

@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")



	<script type="text/javascript">
 
		$('#myweb3').addClass('active');
		$('#ios2').addClass('in active');
	</script>
	
}

  

 

posted @ 2017-12-02 19:36  秋天来了哟  阅读(224)  评论(0)    收藏  举报
认识就是缘份,愿天下人都快乐!
QQ: 32316131
Email: 32316131@qq.com