Hi, I'm a beginner in programming
I do not understand it from the following contents.
Excuse me, but please answer.

I want to create a tab page using jQuery.
However, the characters tabs-content are not displayed in the tab.

Error message
Applicable source code
<!DOCTYPE html>
<meta charset="utf-8">
<title>JavaScript Test</title>
<link rel="stylesheet" href="main.css">
    tab a
    tab b
    tab c
    <p>Contains the contents of tab a.</p>
    <p>Contains the contents of tab b.</p>
    <p>Contains the contents of tab c.</p>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js"></script>
``` enter your language here
body {
color: #3F4548;
.tabs-menu {
margin: 0;
padding: 0;
list-style-type: none;
.tabs-menu div {
float: left;
margin-right: 8px;
margin-bottom: -1px;
border-style: solid;
border-width: 1px;
border-color: transparent;
border-radius: 4px 4px 0 0;
transition: all .15s;
.tabs-menu div {
display: block;
padding: 10px 20px;
color: #557F95;
text-decoration: none;
.tabs-menu div:not(.active):hover {
border-color: #f0f0f0 #f0f0f0 #999;
background-color: #f0f0f0;
.tabs-menu .active {
border-color: #999 #999 transparent #999;
background-color: #fff;
.tabs-menu .active {
color: #3F4548;
.tabs-content {
clear: both;
border: 1px solid #999;
border-radius: 0 4px 4px 4px;
padding: 10px;
.tabs-content div {
display: none;
``` enter your language here
const showTab = (selector) =>{
    $('.tabs-menu div').removeClass('active');
    // $('div[id="tab-menu-a"]')
    $('.tabs-content >div').hide();
    if (selecter === "tab-menu-a") {
    if (selecter === "tab-menu-b") {
    if (selecter === "tab-menu-c") {

$('.tabs-menu div').on('click', (e) =>{
    const selector = $(e.target).attr('id');
What I tried

Please state what you have tried for the problem here.

Supplemental information (FW/tool ​​version, etc.)

Please provide more detailed information here.