Question

我在垂直导航栏中单击时尝试制作淡入淡出形式。但我不知道这是什么功能。这就是我想要做的。

   Navigation <col-md-3>
+-------------------------+
|   HOME                  |
|   LOGIN                 |
|                         | 
|                         |
|                         |
|                         |
|                         |
|                         |
+-------------------------+

当我点击LOGIN时，一个表单在其下方淡入淡出，锚点LOGIN变为非活动/仅文本

+-------------------------+
|   HOME                  |
|   LOGIN                 |
|   user: _____________   | 
|   pass: _____________   |
|                         |
|                         |
|                         |
|                         |
+-------------------------+

这是我的代码：

<div class="container">
   <div class="row">
      <div class="col-md-3 no-float ">
         <li><a>HOME</a></li>
         <li><a>LOGiN</a></li>
      </div>
   </div>
</div>

你帮我吗？我不知道如何使用javascript和jquery。

Answer 1

你的问题有点不清楚，但如果我理解，你想要一个褪色的标签效果。我做过这样的事情。但在此之前，HTML中存在一些错误：

您不能在<li>内直接使用<div>元素。
您的<a>没有href属性，这很重要。

这就是你需要的。

$(function () {
  $(".tabs").hide();
  $(".menu a").click(function () {
    $this = $(this);
    if ($(".tabs:visible").length)
      $(".tabs:visible").fadeOut(function () {
        $($this.attr("href")).fadeIn();
      });
    else
      $($this.attr("href")).fadeIn();
    $(".menu a").removeClass("active");
    $(this).addClass("active");
  });
});

* {margin: 0; padding: 0; list-style: none;}
body {background-color: #eee;}
a {text-decoration: none;}

.menu {height: 2em; overflow: hidden;}
.menu, .menu li {display: block;}
.menu li {display: inline-block;}
.menu li a {display: block; padding: 5px; background-color: #eee; border: 1px solid #999; border-radius: 3px; color: #999; padding-bottom: 10px;}
.menu li a:hover,
.menu li a.active {color: #000; background-color: #fff;}
.tabs {background-color: #fff; border: 1px solid #999; padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3 no-float">
      <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#login">Sign In</a></li>
      </ul>
      <div class="tabs" id="home">
        Hello, this is home!
      </div>
      <div class="tabs" id="login">
        Username: <input type="text" /><br>
        Password: <input type="password" />
      </div>
    </div>
  </div>
</div>

Answer 2

@Praveen Kumar的答案是完整的。但我试着保持简单：

window.showLogIn= function (){
  console.log("Hello!");
   if ($("#myform").hasClass("myform-shown")){
	    $("#myform").removeClass("myform-shown");
     }else{
	    $("#myform").addClass("myform-shown");
     }
};

.myform{
  opacity:0;
  transition: all 1s;
  margin:30px;
}
.myform-shown{
  opacity:1;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  
<div class="container">
   <div class="row">
      <div class="col-md-3 no-float ">
      <ul>
         <li><a>HOME</a></li>
         <li><a onclick="showLogIn()">LOGiN</a></li>
      </ul>
      </div>
      <form role="form" id="myform" class="myform">
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

   </div>

如何通过点击触发淡入淡出形式

2 个答案: