Question

我刚开始使用javascript和jQuery，还在学习语法。我正在努力完成一些看似非常复杂的事情，希望也许有人可以提供帮助。

如果用户位于包含该标签的相关侧边栏菜单的任何子页面上，我正尝试将“有效”类添加到顶级菜单标签的<a>标记中。

每个topmenu标签都有自己的侧边框，所有相关页面上都会显示相同的侧边框。

每个sidemenu都有一个唯一的类名，分配给其<li>标记，用于标识与之关联的topmenu标签。

我认为这必须由onLoad或新页面上的内容启动，因此我不能使用' this。'来引用父topmenu标签。

我认为我需要做的是获取每个ul.topmenu li a的href值，并删除/。（即/厨房，/公园，/市场变成厨房，公园和市场）

我想我可以用这样的东西做到这一点吗？：

var hrefs = $("ul.topmenu li a").attr('href');
hrefs = hrefs.replace("/","")

然后我需要查看该类是否存在于ul.sidemenu li。[classname]（即class =“active-trail first odd sf-item-1 sf-depth-2 park sf-no-children”）< / p>

也许：

$("ul.sidemenu li").hasClass('hrefs')

如果找到匹配项，我需要在课程中为“ul.topmenu li a”添加“有效”

也许?:

$("ul.topmenu li a").addClass("selected");

我确信有一个很好的方法可以做到这一点。我甚至关闭了吗？任何帮助表示赞赏。

编辑：

这是我的topmenu的HTML：

<ul id="superfish-1" class="sf-menu main-menu sf-horizontal sf-style-default sf-total-items-6 sf-parent-items-0 sf-single-items-6 topmenu">
<li id="menu-218-1" class="first odd sf-item-1 sf-depth-1 topmenu sf-no-children"><a href="/" title="" class="sf-depth-1 topmenu">Home</a></li>
<li id="menu-456-1" class="active-trail middle even sf-item-2 sf-depth-1 topmenu sf-no-children"><a href="/park" class="sf-depth-1 topmenu active">Park</a></li>
<li id="menu-549-1" class="middle odd sf-item-3 sf-depth-1 topmenu sf-no-children"><a href="/farmstay" class="sf-depth-1 topmenu">Farmstay</a></li>
<li id="menu-574-1" class="middle even sf-item-4 sf-depth-1 topmenu sf-no-children"><a href="/market" class="sf-depth-1 topmenu">Market</a></li>
<li id="menu-580-1" class="middle odd sf-item-5 sf-depth-1 topmenu sf-no-children"><a href="/kitchen" class="sf-depth-1 topmenu">Kitchen</a></li>
<li id="menu-352-1" class="last even sf-item-6 sf-depth-1 topmenu sf-no-children"><a href="/galleries" title="" class="sf-depth-1 topmenu">Galleries</a></li>
</ul>

这是“Park”主菜单链接下的页面上显示的侧面菜单的HTML：

<ul id="superfish-2" class="sf-menu main-menu sf-vertical sf-style-default sf-total-items-5 sf-parent-items-0 sf-single-items-5 sidemenu">
<li id="menu-561-2" class="first odd sf-item-1 sf-depth-2 park sf-no-children"><a href="/park/activities" class="sf-depth-2 ">Activities</a></li>
<li id="menu-562-2" class="middle even sf-item-2 sf-depth-2 park sf-no-children"><a href="/park/facilities" class="sf-depth-2 ">Facilities</a></li>
<li id="menu-550-2" class="middle odd sf-item-3 sf-depth-2 park sf-no-children"><a href="/park/hours" class="sf-depth-2 ">Hours</a></li>
<li id="menu-564-2" class="middle even sf-item-4 sf-depth-2 park sf-no-children"><a href="/park/rules" class="sf-depth-2 ">Rules (there are always some)</a></li>
<li id="menu-563-2" class="last odd sf-item-5 sf-depth-2 park sf-no-children"><a href="/park/volunteers" class="sf-depth-2 ">Volunteers</a></li>
</ul>

编辑2：

好的，我想我很亲近。我切换到从URL拉，不知道为什么我以前没想过这样做，它应该更容易，不需要特殊的属性设置。它还没有用，但这就是我所拥有的：

<script type="text/javascript">

   $(document).ready(function() {

     //split the url into parts 
     //www.greenwoodhill.com/park/activities should become an array of [greenwoodhill.com, park, activities]
    var a = location.pathname.split("/");

    //make sure there are at least 2 parts
    if ( a.length > 2 ) {
      //get the second section of the url
      //should be "park" in this case
      var page = a[2]

      // for each url in the .topmenu
      $('ul.topmenu li a').each(function(){

         // check if the href ends with /<page> and assign the class if so
         if ( this.href.substr( -page.length -1) === '/' + page){
           $(this).addClass('itworks');
         }

       });

     }

  });

</script>

Answer 1

更新有关更新后的答案

您的代码作为一个概念是正确的，但您在执行中有几个错误......

location.pathname ^docs返回路径，不含域因此，在您的情况下，它将是'/park/activities'
这将被分割为['','park','activities'] 为避免混淆空的第一个元素，您应该使用.substr() ^docs方法在拆分前删除第一个/。
这会导致location.pathname.substr(1).split("/");返回['park','activities']
Arrays in javascript are 0-bazed ^docs，这意味着第一个元素的索引为0（而不是1，您可能认为）
现在我们已经从空元素中清除了数组，我们应该检查a.length > 1，因为我们需要第一个元素（索引为0 ），我们将访问它与a[0]。
我添加.toLowerCase() ^docs以使比较不区分大小写..

所有组合结果

var a = location.pathname.substr(1).split("/");

//make sure there are at least 2 parts
if (a.length > 1) {
    var page = a[0].toLowerCase();

    // for each url in the .topmenu
    $('ul.topmenu li a').each(function() {

        // check if the href ends with /<page> and assign the class if so
        if (this.href.substr(-page.length - 1).toLowerCase() === '/' + page) {
            $(this).addClass('itworks');
        }

    });
}

工作示例 http://jsfiddle.net/gaby/gSxJc/

原始答案

假设.sidemenu的类名与.topmenu的网址相匹配，您可以

// extract the classname from the first '.sidemenu li' element
var classname = $('ul.sidemenu li')[0].classname;

// for each url in the .topmenu
$('ul.topmenu li a').each(function(){
    // check if the href ends with /<classname> and assign the class if so
    if ( this.href.substr( -classname.length -1) === '/' + classname){
        $(this).addClass('selected');
    }
});

<强>更新

由于您手动创建.sidemenu，因此您应该为其添加data-属性并为其提供您要使用的值，以避免搜索类名。

像

<ul id="superfish-2" data-page="park" class="sf-menu main-menu sf-vertical sf-style-default sf-total-items-5 sf-parent-items-0 sf-single-items-5 sidemenu">

现在而不是搜索你可以做的类名

var page = $('ul.sidemenu li').data("page");
// for each url in the .topmenu
$('ul.topmenu li a').each(function(){
    // check if the href ends with /<page> and assign the class if so
    if ( this.href.substr( -page.length -1) === '/' + page){
        $(this).addClass('selected');
    }
});

将一个类添加到`<a>` tag based on a comparison with an `<li>` class name</li></a>

1 个答案: