导航

两种导航策略，一种基于标签，一种基于路径。

概览

• 标签导航
• 路径导航

---

基于标签导航

使用 .sg-nav-bytag

当 data-active 与 data-tag 匹配时激活。

示例：

<ul class="nav navbar-nav sg-nav-bytag" data-active="UI">
    <li>
        <a href="/" data-tag="Home">
            首页
        </a>
    </li>
    <li>
        <a href="/UI/Default/Index" data-tag="UI">
            UI
        </a>
    </li>
    ...
</ul>

示例中“UI”项将被激活。

SugarRush 项目主菜单即采用此种激活方式。通常在 “.../Shared/_Layout.cshtml”文件中指定激活的菜单项。

基于路径导航

使用 .sg-nav-bypath

当 a 标签的 href 值与当前访问路径“前部”匹配时设定为激活。

示例：

<ul class="nav nav-tabs tabs-left sg-nav-bypath">
    <li>
        <a href="/UI/Default/Index">
            概览
        </a>
    </li>
    <li>
        <a href="/UI/Default/Nav">
            导航
        </a>
    </li>
    ...
</ul>

示例中当访问路径为 http://localhost:2681/UI/Default/Nav 或 http://localhost:2681/UI/Default/Nav?id=12345 时，“导航”项均会被激活。

此种方式通常用于页面左侧导航部分。

---

注意：bootstrap 中的导航控件在激活时，active 样式是应用在 li 上。