通过Repeater添加CSS类

Question

我有一个转发器,使用Sitecore(sc:Link)动态生成标签链接,如下所示:

<asp:Repeater ID="rptTab" runat="server" OnItemDataBound="rptTab_ItemBound">
            <ItemTemplate>
                <li id= "liTabTest" runat = "server" class="tab-label">
                    <asp:HyperLink onclick = "javascript: TabClick(this)" runat="server" id="aLink">
                        <sc:Link ID="hlTabLink" Field="scTabLink" runat="server" ></sc:Link>
                    </asp:HyperLink>
                </li>
            </ItemTemplate>
       </asp:Repeater>

我通过JS操纵CSS:

var loadURL;
$(document).ready(function () {
    init();
});

function init() {
     $("ul#Tab-labels li:first").addClass("TabbedPanelsTabSelected");
  };

  function TabClick(obj) {
      $("ul#Tab-labels li").removeClass("TabbedPanelsTabSelected");
      $(obj).addClass("TabbedPanelsTabSelected");

 };

不幸的是,这不起作用,因为每个选项卡都是一个单独的.ASPX页面,因此页面再次被渲染,这就是为什么JS中的Init()被调用并且CSS每次都被执行到第一个项目.

这是我的代码背后:

        protected void rptTab_ItemBound(Object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Item i = e.Item.DataItem as Item;
            Link hlTabLink = e.Item.FindControl("hlTabLink") as Link;
            hlTabLink.DataSource = i.Paths.FullPath;
            hlTabLink.Field = "Title";
            HyperLink aLink = e.Item.FindControl("aLink") as HyperLink;
            aLink.NavigateUrl = Sitecore.Links.LinkManager.GetItemUrl(i);
        }
    }

我尝试通过代码隐藏添加CSS,但它没有用,因为我无法获取选项卡的索引(哪个选项卡被选中).任何解决方案将不胜感激!谢谢!

Answer 1

不要为在代码隐藏中更好(更容易)完成的任务运行javascript.只需为Sitecore.Context.Item匹配选项卡名称的转发器项设置活动类.ItemDataBound中的伪代码:

if(i == Sitecore.Context.Item)
{
    HtmlGenericControl li = e.Item.FindControl("liTabTest");
    li.Attributes.Add("class","TabPanelTabbedSelected");
}

不确定HtmlGenericControl在这里是否正确,或者它是否具有CssClass属性,但我希望你明白这一点.如果服务器端没有li的直接表示,您还可以绑定字符串文字或使用Literal控件.