html - 带有单选按钮的跨浏览器(平板电脑)错误

Question

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

website我在平板电脑上犯了一个错误。不同的内容部分无法在平板电脑上正确显示 - 内容重叠。例如，Google map 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 还有一个公共(public)类 content 和一个与上面的 vlaue 属性相对应的 id。

<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;
}