简单的导航问题，涉及jQuery'；s.show（）函数

嗨，我有一个迷你导航，我该怎么做？例如，如果你点击“猪”和“猫”（绿色）显示它将显示“红色”（“猪”），但如果你点击“猪”和“红色显示它将隐藏”#红色，对不起，我不知道如何更好地解释它，我希望你理解我的意思，对不起：-）

我的Javascript：

$(function() // run after page loads
{
  $("#HOG").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").show();
     $("#blue").hide();
      $("#green").hide();
  },
  function()
  { // next click shows login form, hides password recovery
       $("#red").show();
     $("#blue").hide();
      $("#green").hide();

  });
});

$(function() // run after page loads
{
  $("#DOG").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").hide();
     $("#blue").show();
      $("#green").hide();
  },
  function()
  { // next click shows login form, hides password recovery
    $("#red").hide();
     $("#blue").show();
      $("#green").hide();
  });
});

$(function() // run after page loads
{
  $("#CAT").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").hide();
     $("#blue").hide();
      $("#green").show();
  },
  function()
  { // next click shows login form, hides password recovery
    $("#red").hide();
     $("#blue").hide();
      $("#green").show();
  });
});

---

抱歉，忽略jQuery注释：-/抱歉，我只是不太明白这是否需要if语句？我不知道接受

（回调，回调）

的

.toggle

过多。下面的伪代码是您想要得到的吗#点击{如果#猫可见{显示#红色}否则{隐藏#红色}}

#container {
    width: 30em;
    height: 20em;
    background-color: #ccc;
    position: relative;
}

#HOG {
    width: 10em;
    height: 10em;
    background-color: red;
    float: left;
    display: block;
}

#DOG {
    width: 10em;
    height: 10em;
    background-color: blue;
    float: left;
    display: block;
}

#CAT {
    width: 10em;
    height: 10em;
    background-color: green;
    float: left;
    display: block;
}

#red {
    width: 30em;
    height: 10em;
    background-color: red;
    clear: both;
    display: none;
}

#blue {
    width: 30em;
    height: 10em;
    background-color: blue;
    clear: both;
    display: none;
}

#green {
    width: 30em;
    height: 10em;
    background-color: green;
    clear: both;
    display: none;
}

$(function() // run after page loads
{
  $("#HOG").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").show();
     $("#blue").hide();
      $("#green").hide();
  },
  function()
  { // next click shows login form, hides password recovery
       $("#red").show();
     $("#blue").hide();
      $("#green").hide();

  });
});

$(function() // run after page loads
{
  $("#DOG").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").hide();
     $("#blue").show();
      $("#green").hide();
  },
  function()
  { // next click shows login form, hides password recovery
    $("#red").hide();
     $("#blue").show();
      $("#green").hide();
  });
});

$(function() // run after page loads
{
  $("#CAT").toggle(function()
  { // first click hides login form, shows password recovery
   $("#red").hide();
     $("#blue").hide();
      $("#green").show();
  },
  function()
  { // next click shows login form, hides password recovery
    $("#red").hide();
     $("#blue").hide();
      $("#green").show();
  });
});