Question

我使用的是标签结构，可以很好地用于桌面视图。

但不适用于移动设备。

请提出任何更改或脚本以解决此问题。

我的代码段：

....
....    
<div class="tabs">
  <!--for desktop-->
  <div class="tab-button-outer">
    <ul id="tab-button">
      <li><a href="#tab01">Billing Details</a></li>
      <li><a href="#tab02">Shipping Details</a></li>
      <li><a href="#tab03">Order Review</a></li>
      <li><a href="#tab04">Payment Method</a></li>
    </ul>
  </div>

  <!--for mobile-->
  <div class="tab-select-outer">
    <select id="tab-select">
      <li><a href="#tab01">Billing Details</a></li>
      <li><a href="#tab02">Shipping Details</a></li>
      <li><a href="#tab03">Order Review</a></li>
      <li><a href="#tab04">Payment Method</a></li>
    </select>
  </div>
  ....
  ....
 </div>
....
....

Answer 1

您不能将li标签放入选择标签中。在选择标签中，您只能放置选项标签。考虑一下：

<select>
    <option><a href="#tab01">Billing Details</a></option>
      <option><a href="#tab02">Shipping Details</a></option>
      <option><a href="#tab03">Order Review</a></option>
      <option><a href="#tab04">Payment Method</a></option>
</select>

还请注意，它不会将您链接到其他页面或更改域名，但是您可以手动进行操作，并使用JavaScript中的onchange侦听器捕获选定的选项。

签出onchange文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange

标签结构适用于台式机，但不适用于移动设备

1 个答案: