Question

我是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-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;
});
});

此代码仅适用于div“A”，我必须单独为每个div编号，这看起来效率非常低。我已经尝试使用split（）来收集类名并定位各自的div，但我没有编码技巧。对此有优雅的解决方案吗？

Answer 1

如果您可以在HTML中拆分类，我会采用不同的方法吗？

e.g。

的div

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

你能改变它们吗？

<div class="work A link1">

如果是这样似乎有用.. ~~稍后会添加一个小提琴~~添加小提琴

$('.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;
});

工作示例：Here

Answer 2

你可以这样做：

$(document).ready(function() {
   $('div[class^=work-]').hide();
   var letters = ["A", "B", "C"]; //Put all posible letters here
   for(var i in letters){
      var letter = letters[i];
      $("."+letter).click(function() {
         $("div[class^=work-]").hide();
         $("div[class^=work-"+letter+"-link1]").fadeIn();
      });
   }
   $('[class^=link]').click(function() {
      $('div[class^=work-]').hide();
      $(this).parent().fadeIn(); //This does the trick!!
      return false;
   });
});

希望这会有所帮助。干杯

JQuery show在DIV中隐藏菜单和菜单中的多个DIV

2 个答案:

工作示例：Here