2
私は 'Eric' https://codepen.io/ehermanson/pen/KwKWEvによって書かれたペンからこのコードを実行しようとしました。ボタンがSignUpフォームで動作していない
これはCodepen.ioで問題なく実行されています。しかし、エディタにコードをコピーしようとすると、結果を得ることができません。つまり、「ログイン」ボタンをクリックすると結果が得られません。
HTML
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<button class="button button-block" />Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
CSS
@import "compass/css3";
$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;
$main: #1ab188;
$main-light: lighten($main, 5%);
$main-dark: darken($main, 5%);
$gray-light: #a0b3b0;
$gray: #ddd;
$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: $body-bg;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: $main;
transition: .5s ease;
&:hover {
color: $main-dark;
}
}
.form {
background: rgba($form-bg, .9);
padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: $br;
box-shadow: 0 4px 10px 4px rgba($form-bg, .3);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba($gray-light, .25);
color: $gray-light;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
&:hover {
background: $main-dark;
color: $white;
}
}
.active a {
background: $main;
color: $white;
}
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: $white;
font-weight: $thin;
margin: 0 0 40px;
}
label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba($white, .5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
.req {
margin: 2px;
color: $main;
}
}
label.active {
transform: translateY(50px);
left: 2px;
font-size: 14px;
.req {
opacity: 0;
}
}
label.highlight {
color: $white;
}
input,
textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid $gray-light;
color: $white;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
&:focus {
outline: 0;
border-color: $main;
}
}
textarea {
border: 2px solid $gray-light;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 40px;
}
.top-row {
&:after {
content: "";
display: table;
clear: both;
}
> div {
float: left;
width: 48%;
margin-right: 4%;
&:last-child {
margin: 0;
}
}
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: $bold;
text-transform: uppercase;
letter-spacing: .1em;
background: $main;
color: $white;
transition: all.5s ease;
-webkit-appearance: none;
&:hover,
&:focus {
background: $main-dark;
}
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
はJavaScript
$('.form').find('input, textarea').on('keyup blur focus', function(e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
へ
の変化を楽しむこの
をライン37でVARを追加もcodepen.ioを追加してください。 ' Erik 'codepen.io lインク –
@RokBurgar完了！ –