小编Nik*_*rov的帖子

逐个切换多个div jquery

我想要做的是在不同的div之间切换.这有点难以解释,但我会试一试.


当页面加载时,会有div可见,4有display:none.还有一个菜单.链接1将显示第一个div并隐藏所有其他div.然后当单击链接2时,可见的div将隐藏,div2将显示.单击链接3时,可见的div将隐藏,div3将显示,依此类推.基本上一次只显示一个div.


我写了这个,但只有当有2个div时它才有效.

$(function () {
  $('#link').click(function () { 
    $('#div1, #div2').toggle();
  });
});
Run Code Online (Sandbox Code Playgroud)

但这只会显示隐藏的div并隐藏显示的那个.

好的,我做到了,发现它可以更轻松地完成.这就是我所做的.它不是很优雅,但它的工作原理.

$(document).ready(function () {
  $('.slidingDiv').hide();
  $('.show_hide').show();

  $('.show_hide').click(function () {
    $('.slidingDiv').slideToggle();
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv2').hide();
  $('.show_hide2').show();

  $('.show_hide2').click(function () {
    $('.slidingDiv2').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv3').hide();
  $('.show_hide3').show();

  $('.show_hide3').click(function () {
    $('.slidingDiv3').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv4').hide();
  $('.show_hide4').show();

  $('.show_hide4').click(function () {
    $('.slidingDiv4').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function(){
  $('.slidingDiv5').hide();
  $('.show_hide5').show();

  $('.show_hide5').click(function () …
Run Code Online (Sandbox Code Playgroud)

html jquery toggle

3
推荐指数
1
解决办法
3万
查看次数

删除.append onmouseout jQuery

当有人抓住我的博客帖子的标题时,我正在尝试添加"阅读更多"文本.我尝试使用 $(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); 但我不知道如何删除阅读更多...当onmouseout.

jquery append mouseover mouseout

2
推荐指数
2
解决办法
3132
查看次数

标签 统计

jquery ×2

append ×1

html ×1

mouseout ×1

mouseover ×1

toggle ×1