Question

我正在学习jquery和java脚本，但仍然不够好。我试图制作切换效果，但无法实现。所以我在这里问这是否可行。这就是我的意思：

我在Div中有两个div：js Fiddle的链接：http://jsfiddle.net/saifrahu28/zzju3/2/

我想要做的是：首先当页面加载时，蓝色Div应该显示，绿色应该隐藏。每当我点击其中的任何一个链接时，他就会出现Blue Div Green Div而Blue Div应该隐藏。同样对于绿色也是如此，当点击绿色Div的侧面链接时，应打开蓝色div并隐藏绿色。这可能吗？

这是他的代码：

HTML

<div style="width:300px; height:200px; background:#FFC;">
   <div class="blueDiv">
    <a>Click Me to Hide Blue Div 1</a>
            <a>Click Me to Hide Blue Div 2</a>
            <a>Click Me to Hide Blue Div 3</a>
   </div>

   <div class="GreenDiv">
     <a>Click Me to Hide Green Div and Show Blue Div Div</a>
   </div>
</div>

CSS

.blueDiv{


width:200px;
height:100px;
background:#09F;
}

.GreenDiv{
 width:250px;
 height:150px;
 background:#0C9;
}  

a{ text-decoration:none;
cursor:pointer;
font-size:10px;

 }

Answer 1

$('a').click(function () {
    $(this).parent().hide().siblings().show();
});

<强> http://jsfiddle.net/Spokey/zzju3/4/

Answer 2

你可以试试这个：

$(function(){
  var blueDiv = $('.blueDiv');
  var greenDiv = $('.GreenDiv').hide();

  blueDiv.find('a').click(function(){
      blueDiv.hide();
      greenDiv.show();
  });
  greenDiv.find('a').click(function(){
      greenDiv.hide();
      blueDiv.show();
  });
});

更新：添加了工作JS Fiddle

Answer 3

http://jsfiddle.net/zzju3/3/

$('.blueDiv').click(function() {
                $('.blueDiv').hide();
            });

$('.GreenDiv').click(function() {
                $('.GreenDiv').hide();
        $('.blueDiv').show();
            });

你走了。其余的你可以尝试用它做什么。

Answer 4

我不确定为什么你在bluediv中有三个<a>标签，但这应该有效。请注意，此$('a')选择器会抓取所有锚标记，因此这可能会导致代码的其他部分出现问题（如果页面上有多个锚标记）。可能值得为您希望用于此功能的所有a标记添加一个类，然后像$('.myAnchorClass')一样抓取它们

$(document).ready(function(){
   $('a').click(function(){  //Attach click event function to each anchor tag
       if($(this).closest('div').hasClass('GreenDiv')){
           $('.blueDiv').show();
       }  else {
           $('.GreenDiv').show();
       }
       $(this).closest('div').hide();
   });
});

通过单击内部</div>中的链接在两个<div>标记之间切换

4 个答案: