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控件。

Answer 2

我的问题的答案是：转发器就像一个数组。所以我可以像这样得到转发器的第一个和最后一个元素：

string currClass =  hc.Attributes["class"].ToString();
string count = e.Item.Controls.Count.ToString();
        if (e.Item.ItemIndex == 0)
                    {
                        currClass += " TabbedPanelsTabSelected";
                    }
     else if (e.Item.ItemIndex.ToString() == count)
                    {
                        currClass += " last";
                    }

通过这种方式，我可以通过Repeater将css添加到我的第一个元素和最后一个元素。

通过Repeater添加CSS类

2 个答案: