如何替换“$”快捷方式

Question

我一直在研究这个 JS，当点击菜单项时进度条加载。我觉得它非常简单，我什至可以在 codepen 上使用它：https://codepen.io/anon/pen/ddaNQK

当我尝试在我的网站上实施此代码时，我不断收到错误消息： "Uncaught TypeError: $ is not a function at (index):74" 我显然还在学习。所以对我来说，把你的答案简化一点。我怎样才能更好地编写这段代码，以便它也能在我的网站上运行？

$(function() {
  $(".et_pb_tab_0").click(function() {
    $(".flyarrow")
      .removeClass("second third fourth fifth")
      .addClass("first");
  });
  $(".et_pb_tab_1").click(function() {
    $(".flyarrow")
      .removeClass("first third fourth fifth")
      .addClass("second");
  });
  $(".et_pb_tab_2").click(function() {
    $(".flyarrow")
      .removeClass("first second fourth fifth")
      .addClass("third");
  });
  $(".et_pb_tab_3").click(function() {
    $(".flyarrow")
      .removeClass("first second third fifth")
      .addClass("fourth");
  });
  $(".et_pb_tab_4").click(function() {
    $(".flyarrow")
      .removeClass("first second third fourth")
      .addClass("fifth");
  });
});

body {
  padding: 50px;
}

.flyarrow,
.two {
  width: 100%;
  height: 12vh;
  background: #ddd;
}

.arrow {
  display: block;
  height: 12vh;
  background: linear-gradient(45deg, #00098e 0%, #49bca9 100%);
  color: #fff;
  position: relative;
  width: 200%;
  text-align: center;
  line-height: 40px;
-webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
  transition: all 2s ease-in-out;
  pointer-events: none;
}

.arrow:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 100%;
  top: 0;
  border: 6vh solid transparent;
  border-left: 25px solid #49bca9;
}

.flyarrow.first .arrow {
  -webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
}

.flyarrow.second .arrow {
  -webkit-transform: translate(-80%, 0px);
  transform: translate(-80%, 0px);
}

.flyarrow.third .arrow {
  -webkit-transform: translate(-70%, 0px);
  transform: translate(-70%, 0px);
}

.flyarrow.fourth .arrow {
  -webkit-transform: translate(-60%, 0px);
  transform: translate(-60%, 0px);
}

.flyarrow.fifth .arrow {
  -webkit-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

ul.et_pb_tabs_controls {
  background-color: rgba(0, 23, 43, 0.26);
  height: 12vh;
}

.et_pb_tabs_controls li {
  width: 20%;
  text-align: center;
  display: table;
  float: left;
  position: relative;
  z-index: 11;
  max-width: 100%;
  height: 100%;
  font-weight: 600;
  line-height: 1.7em;
  cursor: pointer;
}

<ul class="et_pb_tabs_controls">
 <li class="et_pb_tab_0">ONE</li>
  <li class="et_pb_tab_1">TWO</li>
  <li class="et_pb_tab_2">THREE</li>
  <li class="et_pb_tab_3">FOUR</li>
  <li class="et_pb_tab_4">FIVE</li>
    </ul>

<div class="flyarrow">
  <div class="arrow"></div>
</div>

Answer 1

您需要在尝试使用之前参考 JQuery 库。如果您单击设置按钮，然后单击 JavaScript 选项卡，您的 CodePen 会引用它。

放置这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在文档的 <head> 部分。

$(function() {
  $(".et_pb_tab_0").click(function() {
    $(".flyarrow")
      .removeClass("second third fourth fifth")
      .addClass("first");
  });
  $(".et_pb_tab_1").click(function() {
    $(".flyarrow")
      .removeClass("first third fourth fifth")
      .addClass("second");
  });
  $(".et_pb_tab_2").click(function() {
    $(".flyarrow")
      .removeClass("first second fourth fifth")
      .addClass("third");
  });
  $(".et_pb_tab_3").click(function() {
    $(".flyarrow")
      .removeClass("first second third fifth")
      .addClass("fourth");
  });
  $(".et_pb_tab_4").click(function() {
    $(".flyarrow")
      .removeClass("first second third fourth")
      .addClass("fifth");
  });
});

body {
  padding: 50px;
}

.flyarrow,
.two {
  width: 100%;
  height: 12vh;
  background: #ddd;
}

.arrow {
  display: block;
  height: 12vh;
  background: linear-gradient(45deg, #00098e 0%, #49bca9 100%);
  color: #fff;
  position: relative;
  width: 200%;
  text-align: center;
  line-height: 40px;
-webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
  transition: all 2s ease-in-out;
  pointer-events: none;
}

.arrow:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 100%;
  top: 0;
  border: 6vh solid transparent;
  border-left: 25px solid #49bca9;
}

.flyarrow.first .arrow {
  -webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
}

.flyarrow.second .arrow {
  -webkit-transform: translate(-80%, 0px);
  transform: translate(-80%, 0px);
}

.flyarrow.third .arrow {
  -webkit-transform: translate(-70%, 0px);
  transform: translate(-70%, 0px);
}

.flyarrow.fourth .arrow {
  -webkit-transform: translate(-60%, 0px);
  transform: translate(-60%, 0px);
}

.flyarrow.fifth .arrow {
  -webkit-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

ul.et_pb_tabs_controls {
  background-color: rgba(0, 23, 43, 0.26);
  height: 12vh;
}

.et_pb_tabs_controls li {
  width: 20%;
  text-align: center;
  display: table;
  float: left;
  position: relative;
  z-index: 11;
  max-width: 100%;
  height: 100%;
  font-weight: 600;
  line-height: 1.7em;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="et_pb_tabs_controls">
 <li class="et_pb_tab_0">ONE</li>
  <li class="et_pb_tab_1">TWO</li>
  <li class="et_pb_tab_2">THREE</li>
  <li class="et_pb_tab_3">FOUR</li>
  <li class="et_pb_tab_4">FIVE</li>
    </ul>

<div class="flyarrow">
  <div class="arrow"></div>
</div>

如何替换“$”快捷方式

How to replace the '$' short cut

javascript

jquery

codepen