Question

我有动画导航按钮，除了一个元素外，实际上可以用css设置所有内容。一个箭头。这是实际的实时页面。

http://sclarkstudio.com/testing/mm/index.htm

我正在尝试使箭头在当前页面上可见且静态。我有一个悬停脚本，当类设置为.arrow时动画箭头，当类设置为.currenta时，它是静态的和可见的。

<body id="@@id@@"> <!-- in this case "home" -->

<nav class="sidebar1">
<ul class="navbox">
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton home"href="index.htm">Home</a>
        <div id="arrow" class="arrow"></div>
    </li>
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton news"href="news.htm">News</a>
        <div id="arrow" class="arrow"></div>

and so on...



 </ul>
</nav>

我正在尝试编写的脚本只需将箭头div的类更改为“.currenta”

var bodyID = $("body").attr("id");
var url = window.location;

$(function() {

$('nav ul li a #BtnText').each(function(){
var myHref = $(this).attr('href');
if( url == myHref) {
    $(this).closest('div','#arrow').css('currenta');
} 
});
});

我一直在试着想出这个，而不是最好的编码器。

Answer 1

首先：ID应该是唯一的。它只会抓取它使用该ID找到的第一个元素

第二：要添加课程，请使用addClass()

第三：window.location永远不会==您的href所以代码永远不会运行。您想使用indexOf

检查它是否包含您的href

第四：你可以用他们的类名抓取元素。

$('.arrow').each(function(){
     var $this = $(this);
     if(window.location.indexOf($this.siblings('a.navButton').attr('href')) > -1){  //
         $this.removeClass('arrow').addClass('currenta');  
         // I think you wanted to remove the arrow class.. if not just remove it
     }
});

http://jsfiddle.net/9x9uF/

Answer 2

首先，您的网页id中有多个(BtnText and arrow)存在多次，请将其更改为class，因为id必须是唯一的。所以你的HTML应该像下面这样的东西

<nav class="sidebar1">
    <ul class="navbox">
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton home" href="index.htm">Home</a>
            <div class="arrow"></div>
        </li>
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton news" href="news.htm">News</a>
            <div class="arrow"></div>
    </ul>
</nav>

<强> JS

var url = window.location;
$(function() {
    $('nav ul li a.BtnText').each(function(){
        var myHref = $(this).attr('href');
        if(url.match(myHref)) { // use match
            $(this).next('div.arrow')
            .removeClass('arrow').addClass('currenta'); // use removeClass and addClass
        } 
    });
});

DEMO

<强>更新

请注意，删除课程arrow后，您将丢失与此课程相关联的所有样式，因此您可以使用addClass而无需使用arrow删除课程removeClass。所以，在那种情况下

$(this).next('div.arrow').removeClass('arrow').addClass('currenta');

应该是

$(this).next('div.arrow').addClass('currenta');

使用同级元素创建悬停和当前页面状态

2 个答案: