QQ客服热线
首页 > 信息资讯 > 技术专栏

技术专栏

采用母版页后,如何动态设置导航栏的样式
2013年9月8日
摘要: 相信很多朋友,经常会遇到这样的问题,采用母版页后,导航栏样式无法设置的问题。

 

相信很多朋友,经常会遇到这样的问题,采用母版页后,导航栏样式无法设置的问题。

比如:

导航栏html代码

<ul>

<li><a href="#">首页</a></li>

<li><a href="#" class="selected">产品</a></li>

<li><a href="#">关于我们</a></li>

</ul>

这是产品页的导航栏,采用模板后,无法设置class,那么怎么才能动态设置导航样式呢。

这里是asp.net MVC里的用法,适合mvc开发的网站。

分下面两步:

1、在模板页里设置导航栏。比如我的母版页面是Layout.cshtml。

<div class="nav_main">
@if (IsSectionDefined("Menu"))
{
@RenderSection("Menu") //传递给子页面的参数,可以这么理解
}
else
{ @Html.Action("Menu", "Common", new { cssType = "Home" }) } //这里是我设置的 导航栏,cssType是一个传递的参数。具体代码下面给出。
</div>

@RenderBody() //这里是子页面的内容。

2、在子页面里设置 比如 product.cshtml页面:

@section Menu{
@Html.Action("Menu", "Common", new { cssType = "NewProducts" }) // 这里传递了cssType参数 通过这个参数我们可以设置样式。
}

下面是导航栏的具体代码:

<ul id="menu">
<li><a id="menu_Home" href="@Url.RouteUrl("HomePage")" title="@T("HomePage")"><span>@T("HomePage")</span></a></li>
<li><a id="menu_AboutUs" href="@Url.RouteUrl("Topic", new { SystemName = "aboutus" })" title="@T("AboutUs")"><span>@T("AboutUs")</span></a></li>
<li><a id="menu_NewProduts" href="@Url.RouteUrl("RecentlyAddedProducts")"><span>@T("Products.NewProducts")</span></a>
</li>
</ul>
<script>

$(document).ready(function () {
var cssType = "@Model.CssType";
$("ul#menu a.selected").removeClass('selected')
$("ul#menu a#menu_" + cssType).addClass('selected');

});

</script>

这样我们就完成了导航栏样式的改变了,对应的页面设置对应的样式。不是最好的方法,但可以解决问题。相信还有更好的方法。

 

来自TCNET 转载请保留www.nbtcnet.com

返回列表