Question

我正在尝试为移动设备和桌面设备采用不同的设计。为此，需要为移动界面重新设计3个单选按钮和其他一些内容，但需要同一页面。

所以，我担心的是，2个块可以共享一个ID，因为我隐藏并按媒体查询显示。

示例：

第1座

<div class="visible-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom" />
</div>

第2座

<div class="hidden-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom1" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom1" />
</div>

它在功能方面起作用，但问题是移动页面上的无线电未被检查

Answer 1

要对无线电输入进行分组，他们必须使用相同的name属性并自动检查其中一个，只有一个 同名组的无线电输入必须具有checked="checked"属性。

如果两个或多个属性具有该属性，则默认情况下不会选择任何属性。

Answer 2

我会用另一个问题回答你的问题。：）

为什么你不使用一种形式和格式，基于天气是桌面还是移动，使用CSS？

这样你就不必创建2个表格。

我正在考虑这样的事情：

http://www.htmlgoodies.com/beyond/css/targeting-specific-devices-in-your-style-sheets.html

我发送的这个页面有基本的说明。我们的想法是识别设备并提供适当的CSS，这样你只需要一个DIV和2个CSS。

您也可以使用javascript执行此操作：

<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('Android') != -1)) {
        document.write("css_mobile.css");
    } 
    else
    {
        document.write("css_browser.css");
    }
// ]]>
</script>

欢呼声

两个单选按钮有条件地共享一个“id”？

2 个答案: