带有单选按钮的跨浏览器（平板电脑）错误

Question

我已经问过类似的问题，但我仍然遇到这个问题。

我制作的website 在平板电脑上有一个错误。不同的内容部分无法在平板电脑上正确显示 - 内容重叠。例如，Google Maps iframe 在页面加载时显示，而不是在单击相应的单选按钮（标签！）时显示。这只发生在平板电脑上。

经过深思熟虑，我发现单选按钮可能是罪魁祸首。在台式机上，一切看起来都还不错。

抱歉，我无法制作 JSfiddle 来重现平板电脑问题（仅向那些可以使用开发工具的人明确寻求帮助，快速浏览一下，也许可以指出需要做什么才能实现它在平板电脑上工作，简而言之，只有真正的坏蛋跨浏览器 Chucknorisses）。

非常感谢您的帮助！

更新：

我所说的单选按钮是“设计隐藏的”，仅将标签保持为可见/可点击元素。

代码如下所示（这将是黄色的“主页”按钮）：

<div class="mx-button" id="real_button5">
                    <input type="radio" name="mx" id="button5" checked>
                    <label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label> 
</div>

似乎在平板电脑上，这些按钮是可点击的（发生了一些事情），但它们并没有取消隐藏正确的内容。事情重叠。

Answer 1

由于您已经在项目中使用 jQuery，我为您构建了一个 small example fiddle。其背后的概念如下：

所有菜单按钮都有menubutton 类。这使您可以设置按钮的样式，但还允许您在它们上使用 jQuery 选择器。此外，我给每个按钮一个value 属性。该属性表示应该显示的内容 div 的 id。

内容 div 也有一个公共类 content 和一个 id 对应于上面的 vlaue 属性。

<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>

<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>

现在我默认使用 CSS 隐藏所有内容 div：

.content {
    display:none;
}

JavaScript 部分也没有那么复杂。我用menubutton 类为每个元素添加了一个点击功能。这是通过jQuery selector 完成的。现在所有内容 div 都由$(".content") 选择，我用hide() 隐藏它们。 this.value是你点击的按钮的value属性，用来展示这个特定的内容div。

$('.menubutton').click( function() {
   $(".content").hide();  
   $("#" + this.value).show();
});

我希望这向您展示了 jQuery 的一些可能性。

---

更新

由于您想使用 div 而不是按钮，因此我对示例进行了一些更改，您可以在 fiddle 中看到它们。

我从按钮更改为 div，并为每个内容 div 添加了一个 id，如下所示：

<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>

<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>

内容 div 的 id 与其导航 div 的 id 加上一个标准前缀相匹配。 show_ 在我的例子中。 JS 代码已更新为使用 id，而不是 value 属性来查找所需的内容 div：

$('.menubutton').click( function() {
   $(".content").hide();  
   $("#show_" + this.id).show();
});

---

更新二

要默认显示一个内容 div，您可以向该 div 添加另一个 css 类（请参阅更新的fiddle）

<div class="content default_content" id="show_content1">Content 1</div>

我在 CSS 文件中添加了这个对应的类：

.default_content {
    display:block;
}