Question

嗨我有一个迷你导航我怎么做到这一点如果你点击#HOG和#CAT（#green）显示它会显示#red（#HOG）但是如果你点击#HOG和＃红色显示它会隐藏#red，抱歉我不知道如何更好地解释它我希望你理解我的意思，抱歉： - ）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toggle</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <h1>Hog</h1>



<div id="container">    

<div id="menu"> 

    <div id="HOG"></div>

    <div id="DOG"></div>

    <div id="CAT"></div>

    <div id="red"></div>

    <div id="blue"></div>

    <div id="green"></div>

</div>



    </div>

    <script src="jquery-1.8.3.js"></script>
    <script src="main.js"></script>
</body>
</html>

我的CSS：

#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;
}

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

简单的Nav问题涉及jQuery的.show（）函数

0 个答案: