帮我用js做一个顶部TAB导航栏网页 点击不同超链接会出现不同的文字鼠标悬浮时有灰色背景鼠标点击时有绿色背景

当用户点击不同的超链接时，我们可以通过JavaScript来动态改变相应的文字和背景颜色。以下是一个简单的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>TAB导航栏</title>
    <style>
    .nav-link {
        display: inline-block;
        padding: 10px 20px;
        background-color: #ccc;
        margin-right: 10px;
        cursor: pointer;
    }

    .nav-link:hover {
        background-color: gray;
    }

    .active {
        background-color: green;
    }

    .content {
        margin-top: 20px;
    }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-link" onclick="changeContent('link1')">链接1</div>
        <div class="nav-link" onclick="changeContent('link2')">链接2</div>
        <div class="nav-link" onclick="changeContent('link3')">链接3</div>
    </div>

    <div class="content">
        <h1 id="text">默认文本</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

function changeContent(link) {
    // 清除之前的选中状态
    var activeLinks = document.getElementsByClassName("active");
    for (var i = 0; i < activeLinks.length; i++) {
        activeLinks[i].classList.remove("active");
    }

    // 设置当前选中的链接为active状态
    var currentLink = document.getElementById(link);
    currentLink.classList.add("active");

    // 根据选中的链接动态改变文字内容
    var text = document.getElementById("text");
    if (link === "link1") {
        text.innerHTML = "链接1的内容";
    } else if (link === "link2") {
        text.innerHTML = "链接2的内容";
    } else if (link === "link3") {
        text.innerHTML = "链接3的内容";
    }
}

以上代码中，我们使用了class和id来选择元素，并通过classList来添加和移除样式类。点击不同的超链接时，根据链接的不同，我们改变对应的文本内容和背景颜色

帮我用js做一个顶部TAB导航栏网页点击不同超链接会出现不同的文字鼠标悬浮时有灰色背景鼠标点击时有绿色背景

帮我用js做一个顶部TAB导航栏网页 点击不同超链接会出现不同的文字鼠标悬浮时有灰色背景鼠标点击时有绿色背景

帮我用js做一个顶部TAB导航栏网页点击不同超链接会出现不同的文字鼠标悬浮时有灰色背景鼠标点击时有绿色背景