导航样式 - 仅选择子 li答案

【问题标题】：Navigation styling - selecting child li only导航样式 - 仅选择子 li
【发布时间】：2014-01-02 15:39:33
【问题描述】：

我正在 Sitefinity 中构建 LHN，但在设置样式时遇到了问题。当一个页面被设置为活动页面时，它会获得 sfsel 类。不幸的是，当子页面处于活动状态时，它也会将其应用于父页面。我需要获取样式，因此当子页面处于活动状态时，只有该列表项被突出显示，但是当只有父“关于”页面处于活动状态时，它仍然被突出显示。

http://jsfiddle.net/4NnaZ/1/

<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
    <ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
        <li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
            <div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
            </div>
            <ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
                <li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
                    <div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
                    </div>
                </li>
                <li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
                    <div class="k-mid"><a href="careers" class="k-in">Careers</a>
                    </div>
                </li>
                <li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
                    <div class="k-mid"><a href="producer-board" class="k-in">Producer Board</a>
                    </div>
                </li>
                <li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
                    <div class="k-bot"><a href="contact-information" class="k-in">Contact Information</a>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

【问题讨论】：

你用什么脚本来设置 sfSel 类？因为 CSS 真的无济于事。这： div > ul >li > div > a.sfSel { 背景颜色：#ffcd00; } 会，但是如果它是另一个真正活跃页面的链接呢？在我看来就像一个错误脚本，而不是 CSS 问题
它内置于 Sitefinity。当前页面及其父页面都获得了 sfsel 类。
JavaScript 可能是从父类中删除类的解决方案，但是有没有办法解决这个有趣的行为（2 个不同的链接设置为活动页面），我猜你不是第一个运行的进入这个。

标签： asp.net css navigation sitefinity

【解决方案1】：

k-state-focused 不是您应该用来突出显示当前链接/页面的类吗？

我相信这是一个产生这个类名的 jQuery 脚本。

您可以修改您的代码以为此目的设置一个类，http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page

【讨论】：