0

我有动画导航按钮，实际上可以使用 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');
} 
});
});

我一直在努力解决这个问题，而不是最好的编码器。

4

2 回答 2

0

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

第二：添加一个类使用addClass()

第三：window.location永远不会==你href的代码永远不会运行。您想通过使用检查它是否包含您的 hrefindexOf

第四：你可以只用它们的类名来获取元素。

$('.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/

于 2012-08-03T20:10:38.120 回答
0

首先，id您的页面中(BtnText and arrow)存在重复的 s 不止一次，将它们更改为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
        } 
    });
});

演示。

更新：

请记住，删除类后，arrow您将丢失与该类关联的所有样式，因此您可以直接使用而不使用addClass删除类。所以，在那种情况下arrowremoveClass

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

应该

$(this).next('div.arrow').addClass('currenta');
于 2012-08-03T20:10:53.893 回答