如何在Sitecore主布局中控制CSSclass

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的"active"部分

有什么我可以做的工作吗？一个会话变量,注意这是所有"客户端",使这更复杂.

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

这可能是我唯一的选择.

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项目集合.玩得开心网站核心.