Bootstrap Snippet Sign-Up tabs using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cover-container">
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand"></h3>
              <ul class="nav masthead-nav">
                <!--<li class="active"><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>-->
              </ul>
            </div>
          </div>
          <div class="inner cover">
 
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Please Sign Up It's free and always will be.</h3>
  </div>
  <div class="panel-body">
  <!-- tabs -->
  
  <ul id="dTab" class="nav nav-tabs">
  <li class="active"><a href="#pane1" data-toggle="tab" >Register</a></li>
  <li><a href="#pane2" data-toggle="tab">Login</a></li>
  <!--<li><a href="#pane3" data-toggle="tab"></a></li>-->
</ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane fade in active">
     <!-- Register Username -->
      <form action='d_resgister.php' method="POST">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cover {
width: 400px;
margin: auto;
}
.mastfoot
{
    padding-top:0px;
text-align:center;
margin: auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    
    
    $("#forgetBtn").click(function(){
        $('#dTab li:eq(2) a').tab('show') ;
        $('.tab-content div.active').removeClass('active in');
        $('.tab-content').find('#pane3').addClass('active in');
    });
    
    $("#loginBtn").click(function(){
        $('#dTab li:eq(1) a').tab('show') ;
        $('.tab-content div.active').removeClass('active in');
        $('.tab-content').find('#pane2').addClass('active in');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sign-Up tabs"
Bootstrap 3.1.0 Snippet by asimkh

Related: See More

Questions / Comments:

"Sign-Up tabs" Bootstrap 3.1.0 Snippet by asimkh

Related: See More

Questions / Comments:

"Sign-Up tabs"
Bootstrap 3.1.0 Snippet by asimkh