是否有一种优雅的方式来实现ASP.net中的可选选项卡/菜单

时间:2009-06-29 10:03:41

标签: asp.net css menu

我正在努力寻找在ASP.net中实现标签式菜单系统的方法。从HTML / CSS的角度看,这些选项卡看起来很棒,并且在Master页面中实现,因此我无法访问内容页面中的body标签。我想要解决的是如何根据用户访问的页面改变“活动选项卡”。

我可以想到几种方法:

  1. 在每次加载页面时动态生成HTML
  2. 操纵Page_Load
  3. 中的列表项
  4. 使用jQuery操作选定的选项卡类
  5. 我还有一个问题似乎使某些解决方案不合适;一个选项卡可能包含多个不同的页面名称,因此例如,应为Default.aspx和CourseDetail.aspx选择“课程”选项卡。

    这些看起来都不是特别优雅,我觉得在ASP.net中有更好的方法可以做到这一点,但我不知道我在寻找(或搜索)。

    HTML:

    <div id="tabs">
        <ul>
            <li class="selectedtab"><a href="/">Courses</a></li>
            <li><a href="#">My Courses</a></li>
            <li><a href="#">Administration</a></li>
        </ul>
    </div>
    

    CSS:

    #head ul 
    {
        list-style: none;
        padding:0;
        margin:0;
    }
    
    #head li 
    {
        display: inline;
        border: solid;
        border-width: 1px 1px 0 1px;
        margin: 0 0.5em 0 0;
        background: #EEE;
        font-size: large;
        font-weight: bold;
        padding-top: 0.3em;
    }
    
    #head li a 
    {
        padding: 0 1em;
        text-decoration: none;
        color: Black;
    }
    
    #head .selectedtab
    {
        padding-bottom: 1px; 
        background: white;
        border-bottom: 1px solid white;
    }
    
    #tabs
    {
        text-align: right;
        width: 100%;
        border-bottom: 1px solid;
    }
    

2 个答案:

答案 0 :(得分:1)

我过去总是这样做的方法是给主体一个类,然后每个标签一个类(或id),然后在CSS中使用它们。

<!-- the tabs now have a class you can use -->
<div id="tabs">
    <ul>
        <li class="tabone"><a href="/">Courses</a></li>
        <li class="tabtwo"><a href="#">My Courses</a></li>
        <li class="tabtre"><a href="#">Administration</a></li>
    </ul>
</div>

第一页

<body class="tabonepage">...

secondpage

<body class="tabtwopage">...

css - 这有点冗长,但它本地化为一个位置。只要你没有493个标签,你就会变成金色

.tabonepage .tabone,
.tabtwopage .tabtwo,
.tabtrepage .tabtre,
{
    padding-bottom: 1px; 
    background: white;
    border-bottom: 1px solid white;
}

编辑至于如何让我上课...

这是我羞愧地垂头丧气的地方。我通常在我的主要主人身上放置一个名为BodyClass的属性,然后在OnPreRender中放置一些设置所述属性的代码,并将一个表达式孔放入主主。这不是真的很漂亮,但我和它一起生活,拥有一个体型的好处远远超过我眼中的代码背后:-)可能有一种不涉及代码隐藏的方法,我从来没有真正完全调查它。我觉得MVC会有所帮助。

MainMaster.Master:

<body class='<%=BodyClass%>'>

MainMaster.Master.cs

public string BodyClass{ get; set; }

Everyotherpage .aspx(我不记得是否需要这个,我认为你在代码隐藏中对BodyClass属性进行了强类型访问)

<%@ MasterType VirtualPath="~/MasterPages/MainMaster.Master" %>

everyotherpage .aspx.cs

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Master.BodyClass = "areamydetails";
    }

答案 1 :(得分:1)

我认为根据当前位置切换DIV或控件的CSS类是一种相当优雅的方式。如果您将当前正在访问的页面链接到ASP.NET Navigation API(使用站点地图),那么您应该做得很棒!