Tab structure working for desktop but not working for mobile devices

Question

I am using a tab structure, its working fine for desktop views..

But not working for mobile devices..

Please suggest any changes or script to resolve this issue.

My Code Snippet:

....
....    
<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

You can't put li tags inside a select tag. In the select tag, you can only put option tags. consider this:

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

Also note that it will not link you to another page or change the domain name, but you can do it manually, and catch the selected option with onchange listener in javascript.

Checkout the onchange docs: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange