在我的网页中，我有四个链接(tab1、tab2、tab3、tab4(；我想点击每个选项卡，在同一网页的框或区域中显示特定的文本信息。我应该如何使用HTML/CSS或jquery或JS来处理这个问题？举例说明将不胜感激。感谢
$(function () {
var $tab_contents = $('.tabs-content li'),
$tab_buttons = $('.tabs li');
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tab_buttons.removeClass('active-tab');
$current.addClass('active-tab');
$tab_contents.hide().eq(index).show();
});
});.tabs {
list-style: none;
}
.tabs .active-tab {
color: black;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: blue;
}
.tabs-content {
list-style: none;
}
.tabs-content li {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs">
<li>First tab</li>
<li>Second tab</li>
<li>Third tab</li>
<li>Fourth tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
<li>Content of fourth tab</li>
</ul><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.info {
padding: 5px;
border: 1px solid #DEDEDE;
margin: 5px 0;
background: #EFEFEF;
color: #222222;
text-align: center;
}
</style>
</head>
<body>
<div id='messageBox' class='info'> </div>
<a onclick="showHint(0);">Message 1</a>
<a onclick="showHint(1);">Message 2</a>
<a onclick="showHint(2);">Message 3</a>
<a onclick="showHint(3);">Message 4</a>
<script>
const allMessages = ['Hello World', 'Hello Moon', 'Hello Mars', 'Hello Jupyter']
function showHint(index){
const messageBox = document.getElementById('messageBox')
messageBox.textContent = allMessages[index]
}
</script>
</body>
</html>