CSS

Question

我有一个点击功能，可以捕获点击的链接，并根据以下脚本隐藏和取消隐藏一些div：

$(".link").bind('click', function() {
  //link handler
  event.preventDefault();  //prevents url from changing
  // $(window).resize();  //testing something else
  var value = $(this).attr("href");  //grab hash link of li that was clicked and call it 'value'
  if ($(value).hasClass("active")) {
    return false  //if you click on the link that's already visible, don't do anything
  } else {
    $(value).removeClass("hidden").parent().find(".active").addClass("hidden").removeClass("active");  //unhide the div we want, find current active div and hide it
    $(value).addClass("active");  //classify the now visible div as active
  };
});

我的.hidden类使用display：none隐藏div，而.active类是我识别当前显示div的方法。

它在Chrome中完美运行，但在FireFox或Internet Explorer中没有骰子。非常感谢任何帮助！

编辑：这是我的css：

.hidden {
  display:none

}

.active没有任何规则，我只是用它来识别可见的div。

这是一个小提琴：http://jsfiddle.net/j7df7/

Answer 1

似乎是event.preventDefault（）;那是在firefox中停止执行。评论出来并再次测试。另外，正如sheriffderek所提到的，你可能应该传递一个事件，以便你的代码知道它是什么。

Answer 2

这是你要找的吗？

$(".link").click(function () {
var value = $(this).attr("href"); //grab hash link of li that was clicked and call it 'value'

if(!$(value).hasClass('active'))
{
    $(value).addClass('active').removeClass('hidden');
    $(value).siblings('div').addClass('hidden').removeClass('active');
}


});

Answer 3

这是一个有效的JSFiddle更新; Chrome，Internet Explorer和FireFox。例如，我代之以简化了代码：

$(value).removeClass("hidden").parent().find(".active").addClass("hidden").removeClass("active")

现在只有：

 $(".active").attr('class', 'hidden');

我也改变了你的

$(".link").on('click', function () {

To just（FireFox要求您在代码中放置'event'参数才能使其正常工作）

$(".link").click(function (event) {

无论如何，这是JSFiddle：http://jsfiddle.net/j7df7/3/
这是一个div有2个类的版本，所以你可以保留一个类用于样式而另一个用于隐藏：http://jsfiddle.net/j7df7/5/

Answer 4

这是什么！我不确定这是否适合你 - 但我最近转向了数据 - *它很棒......试试这个。这非常有说服力..... FIDDLE

HTML

<ul class='menu'>
    <li><a href='#' data-display-item='.one'>Link 01</a></li>
    <li><a href='#' data-display-item='.two'>Link 02</a></li>
    <li><a href='#' data-display-item='.three'>Link 03</a></li>
</ul>

<div class="SPA-block one active-page">
    Div 01 (Active to start)
</div>

<div class="SPA-block two">
    Div 02
</div>

<div class="SPA-block three">
    Div 03
</div>

CSS

.SPA-block {
    display: none;
}

.active-page {
    display: block;
}

的jQuery

$('.menu a').on('click',function() {
    $('.SPA-block').removeClass('active-page'),
    $($(this).data('display-item')).addClass('active-page');
    return false;
});

使用点击处理程序（JS）隐藏和显示div在Firefox中不起作用

4 个答案:

HTML

CSS

的jQuery