Question

我在Sitecore中有一个用于所有页面的Master布局。主布局具有一些动态功能...例如，下面的代码表示页面顶部选项卡的标记...此选项卡处于活动状态或处于活动状态...

<div class="main-nav>
   <a id="tabmovies" href="/Movies" class="main-nav-tab active">Movies</a>
   <a id="tabtheatres" href="/Theatres" class="main-nav-tab">Theatres</a> 
</div>

每次加载页面时，都是标记...电影处于活动状态。我想控制这个人是否点击了tabmovies或tabtheatres并切换CSSclass的“活动”部分

我能做些什么来使这项工作？一个会话变量，注意这是所有“客户端”，使这更复杂。

唯一简单的解决方案是拥有两个主布局，并根据用户选择的内容，使用其中任何一个。

这可能是我唯一的选择。

Answer 1

我建议根据您需要的逻辑生成导航并适当设置类。将导航项集合绑定到转发器

<asp:Repeater id="rptMainNav" runat="server" OnItemDataBound="rptMainNav_ItemDataBound">
    <HeaderTemplate>
        <div class="main-nav">
    </HeaderTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>
    <ItemTemplate>
        <asp:HyperLink id="NavItemLink" runat="server" />
    </ItemTemplate>
</asp:Repeater>

然后在项目数据绑定上，您可以适当地设置css类。

protected void rptMainNav_ItemDataBound(Object Sender, RepeaterItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
        Sitecore.Data.Items.Item navItem = (Sitecore.Data.Items.Item)e.Item.DataItem;
        HyperLink navLink = e.Item.FindControl("NavItemLink");

        navLink.Text = navItem.DisplayName;
        navLink.NavigateUrl = Sitecore.Links.LinkManager.GetItemUrl(navItem);
        navLink.Attributes["class"] = "main-nav-tab";

        // This is where you would put whatever check you want...
        //  - For example if the page is the current page
        //  - Or if the nav item is an ancestor of the current page
        if(Sitecore.Context.Item.Id == navItem.Id) {
            navLink.Attributes["class"] += " active";
        }

        // set more link attributes, etc.
    }
}

这是在导航元素上设置活动状态并允许其为动态的非常常用的方法。我强烈建议不要将导航链接和文本硬编码到全局布局中。例如，让它成为主页或站点根目录上的TreelistEx项目集合。玩得很开心。

如何在Sitecore主布局中控制CSSclass

1 个答案: