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>
}
浙公网安备 33010602011771号