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

【问题标题】：Creating hover and current page states with sibling elements使用同级元素创建悬停和当前页面状态
【发布时间】：2012-08-01 21:17:02
【问题描述】：

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

我一直在努力找出这个而不是最好的编码器。

【问题讨论】：

标签： jquery hover parent-child siblings current-page

【解决方案1】：

首先，您的页面中有重复的ids (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>

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 而无需使用 removeClass 删除类 arrow。那么，在那种情况下

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

应该是

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

【讨论】：

太棒了！感谢您的反馈。我很难将代码可视化。我仍然不得不调整它。我添加了一个 var，它给了我页面文件名。 var file = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length);然后添加然后调整了Sheikh的脚本。 $(function() { $('nav ul li a.BtnText').each(function(){ var myHref = $(this).attr('href'); if( file == myHref) { $(this ).next('div.arrow').removeClass('arrow').addClass('currenta'); } }); });非常感谢。

【解决方案2】：

首先：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/

【讨论】：