javascript - 在两个之间切换通过点击他们内部的链接来标记

Question

我正在学习 jquery 和 java 脚本，但仍然不够好。我正在尝试制作切换效果但无法实现。所以我在这里问这是否可能。这是我什么：

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

我要做的是：首先，当页面加载时，蓝色 Div 应该显示，而绿色应该隐藏。并且每当我单击其中的任何 3 个链接时，他 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

我不确定为什么你<a>在 bluediv 中有三个标签，但这应该可以。请注意，此$('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();
   });
});