Question

在拼凑了几个问题之后，我已经成功地展示/隐藏了div：

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

HTML：

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

<div id="category-content">
 <div id="divarea1" class="box">
  Content 1
 </div>

 <div id="divarea2" class="box">
  Content 2
 </div>

 <div id="divarea3" class="box">
  Content 3
 </div>    
</div>

我错过了什么？

Answer 1

这将有效：

 <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>

使用此代码：

$(document).ready(function(){
    $('.box').hide();
    $('#categories div').mouseenter(function() {
       $('.box').hide();
       $('#div' + $(this).attr('rel')).show();
    });
});

更正：

onMouseHover没有这样的功能。
将事件附加到每个div，而不是#categories父级，因此this具有正确的上下文。
为每个div添加了rel，因为val毫无意义。

工作示例：http://jsbin.com/ivuxo

您可能还想在鼠标移出时隐藏div，因为您可以使用hover：

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

Answer 2

灵活，通用（和未经测试！）解决方案，适用于任意数量的“选项卡式”元素组。您只需指定“.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>

Answer 3

我知道这已经有了一个不错的答案，虽然这不是jQuery / mooTools - 我认为值得一提：

使用Javascript隐藏元素的七种方法： http://www.dustindiaz.com/seven-togglers/

：）

Answer 4

onMouseOver不是一个有效的jquery方法，等等。

我真的建议您在浏览javascript时使用谷歌浏览器进行浏览，它的错误控制台非常有用，不仅可以确定这样的错误，而且还可以精确定位脚本中抛出错误的位置，在firefox中超越Firebug是一个优势。

（即使使用chrome，你也可以通过书签运行firebug lite，因为firebug lite网站会显示：http://getfirebug.com/firebuglite）

Answer 5

我用它来切换我的div：

HTML

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

jquery的

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

显示/隐藏Div

5 个答案: