Javascript 这些按钮在注册表单中不起作用

所以我试着用Eric写的笔来运行这段代码

这正在运行，在

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 -->

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);

});

使用此代码：-

$（'.form'）.find（'input，textarea'）.on（'keyup blur focus'，函数（e）{
变量$this=$（this），
label=$this.prev（'label'）；
如果（e.type==='keyup'）{
如果（$this.val（）==''）{
label.removeClass（“活动突出显示”）；
}否则{
label.addClass（“活动突出显示”）；
}
}else if（e.type==='blur'）{
如果（$this.val（）==''）{
label.removeClass（“活动突出显示”）；
}否则{
label.removeClass（'highlight'）；
}   
}else if（e.type==='focus'）{
如果（$this.val（）==''）{
label.removeClass（'highlight'）；
} 
else if（$this.val（）！=''）{
label.addClass（'highlight'）；
}
}
});
$（'tab a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（this.parent（）.addClass（'active'）；
$（this.parent（）.sides（）.removeClass（'active'）；
target=$（this.attr（'href'）；
$（'.tab content>div'）.not（target.hide（）；
美元（目标）.fadeIn（600）；
});
*，*：之前，*：之后{
框大小：边框框；
}
html{
溢出y：滚动；
}
身体{
背景：#c1bdba；
字体系列：“titilliumweb”，无衬线；
}
a{
文字装饰：无；
颜色：#1ab188；
-webkit过渡：.5s轻松；
过渡：放松；
}
a:悬停{
颜色：#179b77；
}
.表格{
背景：rgba（19,35,47,0.9）；
填充：40px；
最大宽度：600px；
利润率：40px自动；
边界半径：4px；
盒影：0 4px 10px 4px rgba（19,35,47,0.3）；
}
.选项卡组{
列表样式：无；
填充：0；
利润率：0.40px0；
}
.选项卡组：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.选项卡组LIA{
显示：块；
文字装饰：无；
填充：15px；
背景：rgba（160179176,0.25）；
颜色：#a0b3b0；
字体大小：20px；
浮动：左；
宽度：50%；
文本对齐：居中；
光标：指针；
-webkit过渡：.5s轻松；
过渡：放松；
}
.选项卡组li a：悬停{
背景：#179b77；
颜色：#ffffff；
}
.选项卡组.活动a{
背景：#1ab188；
颜色：#ffffff；
}
.tab内容>分区：最后一个子项{
显示：无；
}
h1{
文本对齐：居中；
颜色：#ffffff；
字体大小：300；
利润率：0.40px；
}
标签{
位置：绝对位置；
-webkit转换：translateY（6px）；
变换：translateY（6px）；
左：13px；
颜色：rgba（255，255，255，0.5）；
-webkit过渡：所有0.25秒轻松；
过渡：所有0.25秒缓解；
-webkit背面可见性：隐藏；
指针事件：无；
字体大小：22px；
}
label.req{
保证金：2倍；
颜色：#1ab188；
}
label.active{
-webkit转换：translateY（50px）；
变换：translateY（50px）；
左：2px；
字体大小：14px；
}
label.active.req{
不透明度：0；
}
label.highlight{
颜色：#ffffff；
}
输入，文本区{
字体大小：22px；
显示：块；
宽度：100%；
身高：100%；
填充物：5px10px；
背景：无；
背景图像：无；
边框：1px实心#a0b3b0；
颜色：#ffffff；
边界半径：0；
-webkit过渡：边框颜色。25秒轻松，方框阴影。25秒轻松；
过渡：边框颜色。25秒轻松，方框阴影。25秒轻松；
}
输入：焦点，文本区域：焦点{
大纲：0；
边框颜色：#1ab188；
}
文本区{
边框：2px实心#a0b3b0；
调整大小：垂直；
}
.野外包裹{
位置：相对位置；
边缘底部：40px；
}
.第一排：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.顶行>分区{
浮动：左；
宽度：48%；
保证金权利：4%；
}
.顶行>div:最后一个子项{
保证金：0；
}
.按钮{
边界：0；
大纲：无；
边界半径：0；
填充：15px0；
字号：2rem；
字号：600；
文本转换：大写；
字母间距：.1米；
背景：#1ab188；
颜色：#ffffff；
-webkit过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
-webkit外观：无；
}
.按钮：悬停，.按钮：聚焦{
背景：#179b77；
}
.按钮块{
显示：块；
宽度：100%；
}
.忘了{
利润上限：-20px；
文本对齐：右对齐；
}

注册/登入表格




免费报名
名字*
姓*
电子邮件地址*
设置密码*
开始
欢迎回来！
电子邮件地址*
密码*

登录
在js文件的第37行添加var，享受

改变这个

target = $(this).attr('href');

到

请同时添加codepen.io'Erik'codepen.iolink@PrateekGogia很高兴能帮助你。：）
target = $(this).attr('href');

var target = $(this).attr('href');