wordpress怎么让按钮实现当前页面切换，但是网址不切换？

Question

比如网页前端展示产品，产品有不同种类，用户点击按钮或者是鼠标搭上去就自动切换到对应品类。这种怎么实现

Answer 1

您可以使用JavaScript来实现这个功能。以下是可能的代码示例：

HTML代码：

```

<!--定义按钮-->

<button id="page1-btn">页面1</button>

<button id="page2-btn">页面2</button>

<!--定义两个页面-->

<div id="page1">这是页面1</div>

<div id="page2" style="display:none;">这是页面2</div>

```

JavaScript代码：

```

// 获取按钮和页面的元素

var page1Btn = document.getElementById("page1-btn");

var page2Btn = document.getElementById("page2-btn");

var page1 = document.getElementById("page1");

var page2 = document.getElementById("page2");

// 添加按钮的点击事件处理程序

page1Btn.addEventListener("click", function() {

// 如果页面1未被显示，则显示该页面并隐藏页面2

if (page1.style.display === "none") {

page1.style.display = "block";

page2.style.display = "none";

}

});

page2Btn.addEventListener("click", function() {

// 如果页面2未被显示，则显示该页面并隐藏页面1

if (page2.style.display === "none") {

page2.style.display = "block";

page1.style.display = "none";

}

});

```

这个代码的作用是在按钮被点击时显示对应的页面，同时隐藏其他页面。使用这种方法，页面在显示和隐藏之间切换，但网址不会改变。

以上内容参考：蓝易云-稳定服务器

Answer 2

用 jquery 的 tab 切换功能