HTML 页面内不使用 a 标签如何实现跳转

使用 JavaScript 是一种有效的途径。可以通过给元素添加点击事件监听器来触发页面跳转。例如，有一个按钮元素：

<button id="myButton">点击跳转</button>
<script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        window.location.href = 'targetPage.html';
    });
</script>

在这段代码中，获取按钮元素后，为其添加点击事件监听器。当按钮被点击，window.location.href 属性会将页面跳转到指定的 targetPage.html。除了按钮，也可以给其他 HTML 元素添加类似的点击事件来实现跳转。

CSS 中的 cursor: pointer 样式结合 JavaScript 也能模拟出类似链接跳转的交互。先将元素的 cursor 属性设为 pointer，使其在鼠标悬停时呈现手型指针，然后再用 JavaScript 实现跳转功能。

<div id="jumpDiv" style="cursor: pointer;">点击此处跳转</div>
<script>
    const div = document.getElementById('jumpDiv');
    div.addEventListener('click', function() {
        window.location.href = 'newPage.html';
    });
</script>

<button id="pushButton">使用 pushState 跳转</button>
<script>
    const pushButton = document.getElementById('pushButton');
    pushButton.addEventListener('click', function() {
        const stateObject = { page: 'newPage' };
        history.pushState(stateObject, '新页面标题', 'newPage.html');
    });
</script>