Javascript 显示/隐藏div

在拼凑了几个问题之后，我成功地完成了显示/隐藏div的工作：

$(document).ready(function(){
 $('.box').hide();
  $('#categories').onMouseOver(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

HTML:

内容1
内容2
内容3

我遗漏了什么？

这将起作用：

 <div id="btn-top20" rel="area1"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec" rel="area2"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks" rel="area3"><a href="">Our Staff Picks</a></div>

更正：

• 鼠标悬停没有这样的功能
• 将事件附加到每个div，而不是

  #categories

  父级，因此

  此

  具有正确的上下文
• 为每个div添加了

  rel

  ，因为

  val

  没有意义

工作示例：

您可能还想在鼠标外隐藏div，在这种情况下，您可以使用

悬停

：

$('#categories div').hover(
   function() { //hover in
      $('.box').hide();
      $('#div' + $(this).attr('rel')).show();
   }, function(){ //out
      $('.box').hide();
   });

---

我知道这已经有了一个不错的答案，尽管这不是jQuery/mooTools，但我觉得值得一提：

使用Javascript隐藏元素的七种方法：

---

：）

onMouseOver不是一个有效的jquery方法

我真的建议您在调试javascript时使用google chrome进行浏览，它的错误控制台不仅对确定这样的错误非常有用，而且对确定脚本中引发错误的位置也非常有用，这可能是firefox中Firebug之外的优势

（即使在使用chrome浏览器时，您也可以通过bookmarklet运行firebug lite，firebug lite网站将显示：）

灵活、通用（且未经测试！）解决方案，可与任意数量的“选项卡式”元素组配合使用。您只需指定“.tab”即可处理[href=#id_of_target_tab]”层次结构。另外，在页面加载之间会记住所选选项卡

$(function() {  // Shortcut for $(document).ready()

    $('.tab-handles a').mouseenter(function() {
        // Trigger custom event 'hide' for sibling handles.
        $(this).siblings().trigger('hide');
        // Show current tab.
        $($(this).attr('href')).show();
    }).bind('hide', function() {
        // Hide the corresponding tab on custom event 'hide'.
        $($(this).attr('href')).hide();
    }).each(function() {
        // Show tab if its id is found in url as an anchor (or hash).
        if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
            $(this).trigger('mouseenter');
    });

})

您的页面可以包含以下任意数量的结构：

<ul class="tab-handles">
    <li><a href="#top-villas"></a></li>
    <li><a href="#villa-specials"></a></li>
</ul>

<div>
    <div id="top-villas"> Your tab content goes here. </div>
    <div id="villa-specials"> ... </div>
</div>

你的标签内容在这里。
... 

我用它来切换我的div：

html

---

呃，怎么会是“我错过了什么”？会发生什么？没有发生什么？您缺少的一件事是

#categories

是一个

div

，没有任何

val（）

。另一个是该函数被称为

mouseover

而不是

onMouseOver

。除此之外，您还没有指定希望发生什么。当

#categories

悬停时，您想显示什么？我认为你期望

$（this）.val（）

是

area1

、

area2

或

area3

，但解决这些问题的神奇逻辑是什么？你是否在尝试实现手风琴？查看jQueryUI（）+1以使用ul/li而不是嵌套div，他可能会朝这个方向前进。这非常有效，谢谢！我仍然处在一个点上，我只是把它们混合在一起，但我开始看到什么是什么。谢谢你的帮助。

$(function() {  // Shortcut for $(document).ready()

    $('.tab-handles a').mouseenter(function() {
        // Trigger custom event 'hide' for sibling handles.
        $(this).siblings().trigger('hide');
        // Show current tab.
        $($(this).attr('href')).show();
    }).bind('hide', function() {
        // Hide the corresponding tab on custom event 'hide'.
        $($(this).attr('href')).hide();
    }).each(function() {
        // Show tab if its id is found in url as an anchor (or hash).
        if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
            $(this).trigger('mouseenter');
    });

})

<ul class="tab-handles">
    <li><a href="#top-villas"></a></li>
    <li><a href="#villa-specials"></a></li>
</ul>

<div>
    <div id="top-villas"> Your tab content goes here. </div>
    <div id="villa-specials"> ... </div>
</div>

<div class="content-item-news">..</div>
<div class="content-news-extra">...</div>

$(".content-item-news").click(function() {
     $(this).next(".content-news-extra").slideToggle(100);
});