Question

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

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

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

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

非常感谢帮助！

更新：

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

代码看起来像这样（这将是黄色的＆＃39; home＆＃39;按钮）：

<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为每个元素添加了一个click-function。这是通过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();
});

更新II

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

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

我将这个相应的类添加到CSS文件中：

.default_content {
    display:block;
}

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

1 个答案: