导航样式 - 仅选择子li

时间:2014-01-02 15:39:33

标签: asp.net css navigation sitefinity

我正在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>

1 个答案:

答案 0 :(得分:0)

不是k-state-focused您应该使用的课程,只能高亮显示当前链接/页面?

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

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