asp.net - 有没有一种优雅的方法来在 ASP.net 中实现可选择的选项卡/菜单

标签 asp.net css menu

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

我可以想到几种方法:

  1. 在每次加载页面时动态生成 HTML
  2. 操作 Page_Load 中的列表项
  3. 使用 jQuery 操作选定的选项卡类

我还有一个问题似乎使某些解决方案不合适;一个选项卡可能包含多个不同的页面名称,例如,应为 Default.aspx 和 CourseDetail.aspx 选择类(class)选项卡。

这些看起来都不是特别优雅,我觉得在 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;
}

最佳答案

我过去一直这样做的方法是给正文一个类,然后每个选项卡一个类(或 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">...

第二页

<body class="tabtwopage">...

css - 这有点冗长,但它已本地化到一个位置。只要你没有493标签,你就是黄金

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

编辑关于我是如何类的......

这就是我羞愧地低下头的地方。我通常在我的主控上放置一个名为 BodyClass 的属性,然后在 OnPreRender 中放置一些代码来设置所述属性,并在主控上放置一个表达式孔。它不是很漂亮,但我接受了它,在我眼中拥有主体类的好处远远超过了代码隐藏:-)可能有一种方法不涉及代码隐藏,我从来没有真正调查过它。我感觉 MVC 会有所帮助。

主控.主控:

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

主控.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";
    }

关于asp.net - 有没有一种优雅的方法来在 ASP.net 中实现可选择的选项卡/菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1057523/

相关文章:

java - 如何确定哪个菜单项称为 ActionListener?

javascript - JQuery 创建选项卡,tabs() 函数的问题

asp.net - 使用 IIS7 中的表单例份验证保护静态文件

javascript - Jquery toggle div,允许点击div外部关闭,也允许点击div内部的所有内容

CSS隐藏INPUT BUTTON值文本

jquery - 基于没有类的无序列表的 CSS 菜单

c# - WreSTLing 与 ObjectDataSource - 其他控件和变量未定义

ASP.NET "special"标签

html - 图标的 CSS background-position 只显示最后一个图标更多细节见代码

html - 设置下拉宽度比菜单长