Home>

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
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Test</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
  
    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>
</body>
</html>
``` enter your language here
.css
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) =>{
    console.log(selector);
    $('.tabs-menu div').removeClass('active');
    // $('div[id="tab-menu-a"]')
    $(`div[id="${selector}"]`).addClass('active');
    $('.tabs-content >div').hide();
    $(selector).show();
    if (selecter === "tab-menu-a") {
        $('#tabs-a').show();
    };
    if (selecter === "tab-menu-b") {
        $('#tabs-b').show();
    };
    if (selecter === "tab-menu-c") {
        $('#tabs-c').show();
    };
};

$('.tabs-menu div').on('click', (e) =>{
    e.preventDefault();
    const selector = $(e.target).attr('id');
    showTab(selector);
});
showTab('tab-menu-a');
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.