Как сделать исчезающую форму, вызванную нажатием

Question

Как сделать исчезающую форму, вызванную нажатием

-2

Я пытаюсь сделать форму выцветания при нажатии на мою вертикальную навигационную панель. Но я не знаю, какова функция. Это то, что я хочу сделать.

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

и когда я нажимаю LOGIN, форма исчезает под ним, а anchor 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.

amrjo 01 янв. 2016, в 16:10

Источник

0

Ваш вопрос немного неясен.
Praveen Kumar Purushothaman 01 янв. 2016, в 14:37

Теги:

javascript

jquery

twitter-bootstrap

html

css

2 ответа

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="/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>

Praveen Kumar Purushothaman 01 янв. 2016, в 14:53

0

спасибо, но как это исчезает, когда я снова нажимаю на кнопку входа?
amrjo 01 янв. 2016, в 15:27
0

@amrjo Когда вы снова нажимаете на логин, он исчезает. Вы не проверяли?
Praveen Kumar Purushothaman 01 янв. 2016, в 15:27

Ещё вопросы

спасибо, но как это исчезает, когда я снова нажимаю на кнопку входа?
@amrjo Когда вы снова нажимаете на логин, он исчезает. Вы не проверяли?

ehsan88 · Accepted Answer · 2016-01-01T15-27-00.000Z

Ответ @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="/bootstrap.min.css" rel="stylesheet"/>
<script src="/bootstrap.min.js"></script>
<script src="/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>

спасибо, но как это исчезает, когда я снова нажимаю на кнопку входа?
@amrjo Я ОБНОВИЛ КОД! Вы должны проверить, существует ли myform-shown класс .hasClass а затем add или remove его, чтобы переключить его присутствие. Это JQuery, очень просто! Изучите весь API здесь с множеством примеров: api.jquery.com