JQuery显示从DIV中的菜单和菜单中隐藏多个DIV [英] JQuery show hide multiple DIVs from menu and menu within DIV

问题描述

我是JQuery的新手。我试图显示并隐藏多个div。我有一个菜单显示A，B，C。当我点击A时，div A1出现。 Div A1中有一个菜单，显示1,2,3等等。当我在此菜单中单击2时，A1消失，A2出现。当我点击B时，当前可见的div消失，B1出现。 B1有一个菜单显示1，2，3.当您单击2时，B1将被替换为B2。等等 - 我想你会得到这张照片。

这是我的html：

 < div class =thework>< a href =＃class =A> A< / a> < a href =＃class =B> B< / a> < a href =＃class =C> C< / a>< / div> 
< div class =work-A-link1> A1< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-A-link2> A2< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-A-link3> A3< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-B-link1> B1< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-B-link2> B2< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-B-link3> B3< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-C-link1> C1< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-C-link2> C2< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
< div class =work-C-link3> C3< br /> 
< a href =＃class =link1> 1< / a> < a href =＃class =link2> 2< / a> < a href =＃class =link3> 3< / a> 
< / div> 
  

以下是代码：

  $（document）.ready（function（）{
 $（'div [class ^ = work  - ]'）。hide（）; 
 $ （.A）。click（function（）{
 $（div [class ^ = work  - ]）。hide（）; 
 $（div [class ^ = work-A （）函数（）{
 $（div [class ^ = work-] ）.hide（）; 
 $（div [class ^ = work-B-link1]）。fadeIn（）; 
}）; 
 $（。C） .click（function（）{
 $（div [class ^ = work  - ]）。hide（）; 
 $（div [class ^ = work-C-link1]）。 fadeIn（）; 
}）; 
 $（'[class ^ = link]'）。click（function（）{
 $（'div [class ^ = work-]'） .hide（）; 
 var $ this = $（this）; 
 var x = $ this.attr（className）; 
 $（。work-A-+ x ）.fadeIn（）; 
 return false; 
}）; 
}）; 
  

此代码仅适用于divA，我必须为每个div分别编号，这看起来效率很低。我已经尝试使用split（）来收集类名和目标各自的div，但我没有编码技能。是否有一个优雅的解决方案呢？

解决方案

如果您可以分离HTML中的类，我有不同的方法吗？ / p>

例如

< div class =work-A-link1>

你可以改变它们吗？

< div class =work A link1>

如果是这样，这似乎工作.. <罢工>将稍后添加小提琴添加小提琴

  $（'。work'）。hide（）; 
 $（。thework a）。click（function（）{
 var letter = $（this）.attr（class）; //链接类也在工作类中
 $（。work）。hide（）; //隐藏所有工作类
 $（。work.link1。+ letter）.fadeIn（）; //显示相关的工作类
}）; 
 
 $ b $（'。work a'）。click（function（）{
 var pLink = $（this）.attr（class）; //获取链接＃类
 var pLetter = $（this）.parent（）。attr（class）。split（''）[1]; //获取相关的字母，如果letter是数组索引1 
 $ b $ if（$（this）.parent（）。hasClass（pLink））{
 // do nothing 
} else {
 
 $（这个）.parent（）。hide（）; 
 $（。+ pLetter +。+ pLink）.fadeIn（）; //产生.letter.link＃需要CSS选择符
 } 
 
返回false; 
}）; 
  

工作示例：这里

I'm new to JQuery. I'm trying to show and hide multiple divs. I have a menu showing A,B,C. When I click A, the div A1 appears. Div A1 has a menu within it showing 1, 2, 3 and so on. When I click 2 in this menu, A1 disappears and A2 appears. When I click B, the currently visible div disappears and B1 appears. B1 has a menu showing 1, 2, 3. When you click 2, B1 is replaced by B2. And so on - I think you get the picture.

Here is my html:

<div class="thework"><a href="#" class="A">A</a> <a href="#" class="B">B</a> <a href="#" class="C">C</a></div>
<div class="work-A-link1">A1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link2">A2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link3">A3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link1">B1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link2">B2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link3">B3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link1">C1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link2">C2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link3">C3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>

And here's the code to go with it:

$(document).ready(function() {
$('div[class^=work-]').hide();
$(".A").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-A-link1]").fadeIn();
});
$(".B").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-B-link1]").fadeIn();
});
$(".C").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-C-link1]").fadeIn();
});
$('[class^=link]').click(function() {
    $('div[class^=work-]').hide();
    var $this = $(this);
    var x = $this.attr("className");
    $(".work-A-" + x).fadeIn();
    return false;
});
});

This code only works with the div "A", and I'd have to number each div individually, which seems really inefficient. I've tried using split() to gather up the class names and target the respective divs, but I don't have the coding skills. Is there an elegant solution to this?

解决方案

I have a different way if you can split up the classes in your HTML?

e.g. the divs which are

<div class="work-A-link1">

can you change them to?

<div class="work A link1">

if so this appears to work.. will add a fiddle a bit later added fiddle

$('.work').hide();
   $(".thework a").click(function() {
      var letter = $(this).attr("class"); // link class is also in work class 
         $(".work").hide(); // hide all work class
         $(".work.link1."+letter).fadeIn(); //show the relevant work class
   });


   $('.work a').click(function() {
     var pLink = $(this).attr("class"); //gets the link# class
     var pLetter = $(this).parent().attr("class").split(' ')[1]; //gets the relevant letter if letter is 2nd class in array  index 1

     if ($(this).parent().hasClass(pLink)) {
        //do nothing
     } else {

     $(this).parent().hide();
     $("." + pLetter + "." + pLink).fadeIn(); // produces the .letter.link# CSS selector required
   }

   return false;
});

Working Example : Here

这篇关于JQuery显示从DIV中的菜单和菜单中隐藏多个DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！