Question

我在wordpress侧边栏中有一个自定义列表（ul）。我想添加活动类来列出项目。

<ul  class="sidebar-list">
 <li> <a href="index.php/owle/">OWLE</a></li>
 <li><a href="index.php/sink-or-swim/">Sink or Swim</a></li>
 <li><a href="index.php/swim-and-survive/">Swim and Survive</a></li>
 <li><a href="index.php/vwsc/">VWSC</a></li>
 <li><a href="index.php/water-smart/">Water Smart</a></li>
 <li><a href="index.php/grey-medallion/">Grey Medallion</a></li>
 <li><a href="index.php/aquatic-pd-workshops/">Aquatic PD Workshops</a></li>

 <li><a href="index.php/edu-from-anywhere/">Edu From Anywhere</a></li>
 <li><a href="index.php/bronze-e-lifesaving/">Bronze e-Lifesaving</a></li>
 <li><a href="index.php/water-smart-award/">Water Smart Award</a></li>
  <li><a href="index.php/victorian-water-safety-certificate/">Victorian Water Safety Certificate</a></li>
 <li><a href="index.php/edu-from-anywhere-newsletter/">Edu From Anywhere Newsletter</a></li>
 <li><a href="index.php/edu-casual-instructor/">Edu Casual Instructor</a></li>

 <li><a href="index.php/grey-medallion/">Grey Medallion</a></li>
 <li><a href="index.php/sink-or-swim/">Sink or Swim</a></li>
 <li><a href="index.php/edu-instructor-of-year-profile/">Edu Instructor of year Profile</a></li>
  <li><a href="index.php/swim-survive-licensee-of-year/">Swim & Survive Licensee of year</a></li>
   </ul>


<li class="active"> <a href="index.php/owle/">OWLE</a></li>

应该看起来像'index.php / owle /'。

Answer 1

将此添加到您的wordpress他们的自定义JavaScript。很多主题都有。检查主题定制。

 var url = window.location;
 // Will only work if string in href matches with location
 $('sidebar-list li a[href="'+ url +'"]').parent().addClass('active');

 // Will also work for relative and absolute hrefs
  $('sidebar-list li a').filter(function() {
    return this.href == url;
 }).parent().addClass('active');

如果您的主题不具备此功能，则必须对此进行硬编码。我建议你把它添加到你的footer.php

Answer 2

}

试试这段代码吧。您所要做的就是使用您正在使用的类更改这些类名。

Answer 3

你不需要为它编码。

使用wordpress菜单创建侧边栏。

wordpress菜单具有currunt项目的默认类

当前菜单项目

你可以添加css ..

在wordpress中添加自定义ul的活动链接

3 个答案: