如何在Sitecore主佈局中控制CSSclass

我在Sitecore中有一個用於所有頁面的主佈局。主佈局有一些動態功能...例如，下面的代碼表示標記爲在頁面的頂部的標籤...此標籤是有源的或在活性...如何在Sitecore主佈局中控制CSSclass

<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並切換CSS類的「活動」部分。

有什麼我可以做的嗎？一個會話變量，注意這是所有「客戶端」，使這更加複雜。

唯一簡單的解決方案是擁有兩個主佈局，並根據用戶選擇的內容使用其中一個。

這可能是我唯一的選擇。

來源

2013-12-22 Paul T. Rykiel

你使用任何JS庫，如jQuery或原始JavaScript？ – jammykam

Javascript和jquery –

我會建議生成導航並根據您需要的任何邏輯適當地設置類。將導航項的集合綁定到中繼器

<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它。

來源

2013-12-22 04:02:17

謝謝...我會試試這個。 –

這就是我也會做的。整個解決方案的關鍵是檢查當前頁面（上下文項）是否是循環中的項目：'Sitecore.Context.Item.Id == navItem.Id' –

如何在Sitecore主佈局中控制CSSclass

回答

相關問題