Javascript 如何更换'$'；捷径

我一直在研究这个JS，当点击菜单项时，进度条会加载。我觉得它非常简单，我甚至已经将它用于codepen：

当我尝试在我的站点上实现此代码时，我不断收到错误： “未捕获的TypeError:$不是位于（索引）74处的函数” 我显然还在学习。所以请你给我把你的答案说得哑一点。我怎样才能更好地编写这段代码，使它也能在我的网站上工作

$（函数（）{
$（“.et_pb_tab_0”）。单击（函数（）{
$（“.flyarrow”）
.removeClass（“第二、三、四、五”）
.addClass（“第一”）；
});
$（“.et_pb_tab_1”）。单击（函数（）{
$（“.flyarrow”）
.removeClass（“第一个第三个第四个第五个”）
.addClass（“第二”）；
});
$（“.et_pb_tab_2”）。单击（函数（）{
$（“.flyarrow”）
.removeClass（“第一、第二、第四、第五”）
.addClass（“第三”）；
});
$（“.et_pb_tab_3”）。单击（函数（）{
$（“.flyarrow”）
.removeClass（“第一、第二、第三、第五”）
.addClass（“第四”）；
});
$（“.et_pb_tab_4”）。单击（函数（）{
$（“.flyarrow”）
.removeClass（“第一、第二、第三、第四”）
.addClass（“第五”）；
});
});
正文{
填充：50px；
}
flyarrow先生，
.二{
宽度：100%；
高度：12vh；
背景：ddd；
}
.阿罗{
显示：块；
高度：12vh；
背景：线性梯度（45度，#00098e 0%，#49bca9 100%）；
颜色：#fff；
位置：相对位置；
宽度：200%；
文本对齐：居中；
线高：40px；
-webkit转换：转换（-90%，0px）；
转换：转换（-90%，0px）；
过渡：所有2个易于输入输出；
指针事件：无；
}
.阿罗：之后{
内容：“；
位置：绝对位置；
身高：0；
宽度：0；
左：100%；
排名：0；
边框：6vh实心透明；
左边框：25px实心#49bca9；
}
.飞箭，第一，箭{
-webkit转换：转换（-90%，0px）；
转换：转换（-90%，0px）；
}
.飞箭，二号，箭{
-webkit转换：转换（-80%，0px）；
转换：转换（-80%，0px）；
}
.飞箭.第三个.箭{
-webkit转换：转换（-70%，0px）；
转换：转换（-70%，0px）；
}
.飞箭.第四.箭{
-webkit转换：转换（-60%，0px）；
转换：转换（-60%，0px）；
}
.飞箭，五号，箭{
-webkit转换：转换（-50%，0px）；
转换：转换（-50%，0px）；
}
ul.et\U pb\U标签\U控制{
背景色：rgba（0,23,43,0.26）；
高度：12vh；
}
.et_pb_tabs_控件li{
宽度：20%；
文本对齐：居中；
显示：表格；
浮动：左；
位置：相对位置；
z指数：11；
最大宽度：100%；
身高：100%；
字号：600；
线高：1.7em；
光标：指针；
}

一个
两个
三个
四个
五个

您需要在尝试使用JQuery库之前引用它。如果单击设置按钮，然后单击JavaScript选项卡，代码笔将被引用

放置此：

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

正文{
填充：50px；
}
flyarrow先生，
.二{
宽度：100%；
高度：12vh；
背景：ddd；
}
.阿罗{
显示：块；
高度：12vh；
背景：线性梯度（45度，#00098e 0%，#49bca9 100%）；
颜色：#fff；
位置：相对位置；
宽度：200%；
文本对齐：居中；
线高：40px；
-webkit转换：转换（-90%，0px）；
转换：转换（-90%，0px）；
过渡：所有2个易于输入输出；
指针事件：无；
}
.阿罗：之后{
内容：“；
位置：绝对位置；
身高：0；
宽度：0；
左：100%；
排名：0；
边框：6vh实心透明；
左边框：25px实心#49bca9；
}
.飞箭，第一，箭{
-webkit转换：转换（-90%，0px）；
转换：转换（-90%，0px）；
}
.飞箭，二号，箭{
-webkit转换：转换（-80%，0px）；
转换：转换（-80%，0px）；
}
.飞箭.第三个.箭{
-webkit转换：转换（-70%，0px）；
转换：转换（-70%，0px）；
}
.飞箭.第四.箭{
-webkit转换：转换（-60%，0px）；
转换：转换（-60%，0px）；
}
.飞箭，五号，箭{
-webkit转换：转换（-50%，0px）；
转换：转换（-50%，0px）；
}
ul.et\U pb\U标签\U控制{
背景色：rgba（0,23,43,0.26）；
高度：12vh；
}
.et_pb_tabs_控件li{
宽度：20%；
文本对齐：居中；
显示：表格；
浮动：左；
位置：相对位置；
z指数：11；
最大宽度：100%；
身高：100%；
字号：600；
线高：1.7em；
光标：指针；
}


一个
两个
三个
四个
五个

Java和JavaScript不相关，就像狗和热狗一样。这就解决了它！在这里教我一点，那么像你建议的那样引用JQuery是常见的吗？还是有什么方法可以让我编写得更好？@AdamBaird这是标准的JavaScript。在尝试使用外部脚本之前，必须先引用它们。否则，您的浏览器如何了解脚本？别忘了投票选出答案并将其标记为答案。