3

好吧，我会尽量把这点说清楚。善良，我对 JavaScript 很陌生。

我有一个名为 nav 的 div 容器，它包含五个导航按钮，它们都并排浮动。在那个容器下，我有一个名为 underbar 的 div 容器，它只是每个导航元素下的一个纯色条。当有人将鼠标悬停在导航 div 上时，该元素下栏的颜色会发生变化。现在，我有你在下面看到的，它工作正常。

<div id="container">
<div id="nav">
<div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"><a href="one.html">One</a>    </div><!-- end of first nav -->
<div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"><a href="two.html">Two</div><!-- end of second nav -->
<div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"><a href="three.html">Three</div><!-- end of third nav -->
<div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"><a href="four.html">Four</div><!-- end of fourth nav -->
<div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"><a href="five.html">Five</div><!-- end of fifth nav -->
</div><!-- end of nav div -->

<div id="underbar">
<div id="ubone"></div><!-- end of first nav -->
<div id="ubtwo"></div><!-- end of second nav -->
<div id="ubthree"></div><!-- end of third nav -->
<div id="ubfour"></div><!-- end of fourth nav -->
<div id="ubfive"></div><!-- end of fifth nav -->
</div><!-- end of underbar div -->

</div><!-- end of container div-->

这很好用，是的。但是，我绝对讨厌不得不一一编辑这些的想法。使用 javascript 函数/jquery（最好）同时能够为多个 div id 进行简化的最简单方法是什么？想法/意见？谢谢！

4

6 回答 6

4

这针对作为元素div的直接子#nav元素的 's。

$(document).ready(function(){
    $('#nav > div').mouseover(function(){

        $('#ub' + this.id).css('backgroundColor', 'grey');

    }).mouseout(function(){

        $('#ub' + this.id).css('backgroundColor', 'white');

    });
});

如果你想要一个纯 Javascript 解决方案，那么试试这个：

window.onload = function(){

    var elements = document.querySelectorAll('#nav > div');

    for(var i=0; i<elements.length; i++)
    {
        elements[i].onmouseover = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'grey';
        };
        elements[i].onmouseout = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'white';
        };
    }
}
于 2012-12-03T17:24:37.477 回答
2

这是一个有效的 DEMO答案：

http://jsfiddle.net/AVk6k/1/

并改用jQuery.hover()。 .hover()就像一个速记，结合.mouseenter()并.mouseleave()成为一个处理程序。

恕我直言，mouseenter并且mouseleave比mouseover和更可靠mouseout，后者往往会闪烁。

jQuery：

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});​

您还缺少一些</a>标签。

HTML：

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></div><!-- end of fifth nav -->
    </div><!-- end of nav div -->
    <div id="underbar"> 
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->   
    </div><!-- end of underbar div -->   
</div><!-- end of container div-->​
于 2012-12-03T17:53:59.243 回答
2 
$(".myClass").mouseover(function() {
    $('#ub' + this.id).css('background-color', 'gray');
  }).mouseout(function(){
     $('#ub' + this.id).css('background-color', 'white');
  });
于 2012-12-03T17:26:12.930 回答
1

提供的所有解决方案都使用 jQuery 来实现您想要的。使用纯 Javascript（速度更快），使用以下方法：

<script type="text/javascript">
function hoverMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='gray';
}

function blurMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='white';
}
</script>

<div id="container">
    <div id="nav">
        <div id="one" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="one.html">One</a>    </div><!-- end of first nav -->
        <div id="two" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="two.html">Two</div><!-- end of second nav -->
        <div id="three" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="three.html">Three</div><!-- end of third nav -->
        <div id="four" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="four.html">Four</div><!-- end of fourth nav -->
        <div id="five" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="five.html">Five</div><!-- end of fifth nav -->
    </div><!-- end of nav div -->

    <div id="underbar">
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->
    </div><!-- end of underbar div -->
</div><!-- end of container div-->
于 2012-12-03T17:31:33.760 回答
0 
$("#nav").on("mouseover", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'gray');
}).on("mouseout", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'white');
});
于 2012-12-03T17:26:29.197 回答
0

编辑：误读了这个问题。这是我修改后的答案。

我会建议一个语义上更正确的标记。由于您的导航实际上是一个链接列表，因此通常将其设置为这样的标准做法：

<ul id="nav">
  <li rel="#ubone"><a href="mypage1.html">One</a><li>
  <li rel="#ubtwo"><a href="mypage2.html">Two</a><li>
  <li rel="#ubthree"><a href="mypage3.html">Three</a><li>
  <li rel="#ubfour"><a href="mypage4.html">Four</a><li>
</ul>

这确实需要一些额外的样式来删除默认列表样式，但会导致导航对 Google 网络爬虫更有意义，并遵循良好的编码实践。如果有疑问，这里是 css 的开始：

#nav {margin:0; padding:0;}
#nav li {list-style:none; float:left; padding:5px 10px; background:#FFF;}
#nav a {color:#000; text-decoration:none;}

要回答您的原始问题，您可以使用 jQuery 添加行为，如下所示：

$(document).ready(function(){
  // The document ready waits for the document to load before adding JS to the elements
  // We use the css selector for our element to select it, then use the hover function to apply a behaviour
  $('#nav li').hover(function(){
    // This function executes when the mouse hovers over the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#ccc'
    });
  }, function(){
    // This function executes when the mouse leaves the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#fff'
    });        
  });
});

如果您需要更多关于 jQuery 的帮助，请访问http://api.jquery.com/，那里有一些优秀的深度文档。

注意- 没有看到你应用的实际样式我不能确定，但​​听起来你的下划线也可以通过添加底部边框然后使用 ":hover" css 伪类更改悬停颜色来完成.

于 2012-12-03T17:29:32.703 回答