"jQuery switching tabs and select"
Bootstrap 4.1.1 Snippet by yui.napassorn

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br/><br/> <div class="tabs"> <div class="tab-button-outer"> <ul id="tab-button"> <li><a href="#tab01">Tab 1</a></li> <li><a href="#tab02">Tab 2</a></li> <li><a href="#tab03">Tab 3</a></li> <li><a href="#tab04">Tab 4</a></li> <li><a href="#tab05">Tab 5</a></li> </ul> </div> <div class="tab-select-outer"> <select id="tab-select"> <option value="#tab01">Tab 1</option> <option value="#tab02">Tab 2</option> <option value="#tab03">Tab 3</option> <option value="#tab04">Tab 4</option> <option value="#tab05">Tab 5</option> </select> </div> <div id="tab01" class="tab-contents"> <h2>Tab 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p> </div> <div id="tab02" class="tab-contents"> <h2>Tab 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p> </div> <div id="tab03" class="tab-contents"> <h2>Tab 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p> </div> <div id="tab04" class="tab-contents"> <h2>Tab 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p> </div> <div id="tab05" class="tab-contents"> <h2>Tab 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p> </div> </div>
body { font-family: 'Open Sans', sans-serif; font-weight: 300; } .tabs { max-width: 640px; margin: 0 auto; padding: 0 20px; } #tab-button { display: table; table-layout: fixed; width: 100%; margin: 0; padding: 0; list-style: none; } #tab-button li { display: table-cell; width: 20%; } #tab-button li a { display: block; padding: .5em; background: #eee; border: 1px solid #ddd; text-align: center; color: #000; text-decoration: none; } #tab-button li:not(:first-child) a { border-left: none; } #tab-button li a:hover, #tab-button .is-active a { border-bottom-color: transparent; background: #fff; } .tab-contents { padding: .5em 2em 1em; border: 1px solid #ddd; } .tab-button-outer { display: none; } .tab-contents { margin-top: 20px; } @media screen and (min-width: 768px) { .tab-button-outer { position: relative; z-index: 2; display: block; } .tab-select-outer { display: none; } .tab-contents { position: relative; top: -1px; margin-top: 0; } }
$(function() { var $tabButtonItem = $('#tab-button li'), $tabSelect = $('#tab-select'), $tabContents = $('.tab-contents'), activeClass = 'is-active'; $tabButtonItem.first().addClass(activeClass); $tabContents.not(':first').hide(); $tabButtonItem.find('a').on('click', function(e) { var target = $(this).attr('href'); $tabButtonItem.removeClass(activeClass); $(this).parent().addClass(activeClass); $tabSelect.val(target); $tabContents.hide(); $(target).show(); e.preventDefault(); }); $tabSelect.on('change', function() { var target = $(this).val(), targetSelectNum = $(this).prop('selectedIndex'); $tabButtonItem.removeClass(activeClass); $tabButtonItem.eq(targetSelectNum).addClass(activeClass); $tabContents.hide(); $(target).show(); }); });

Related: See More


Questions / Comments:

there is a problem if you write text too long in tab... ;(

screenshot : https://imgur.com/bdVxG4B

Demky (-1) - 5 years ago - Reply 0