html - jquery ui tabs in to selected option -

html - jquery ui tabs in to selected option -

how create jquery ui tabs in selected alternative in mobile version. can help me prepare issue. have responsive design. desktop version jquery tab , mobile select option.

http://jqueryui.com/tabs/

<div id="tabs"> <ul> <li><a href="#tabs-1">nunc tincidunt</a></li> <li><a href="#tabs-2">proin dolor</a></li> <li><a href="#tabs-3">aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>tabs-1</p> </div> <div id="tabs-2"> <p>tabs-2</p> </div> <div id="tabs-3"> <p>tabs-3</p> </div> </div>

here updated code hope help u

class="snippet-code-js lang-js prettyprint-override">$(".tabs-menu a").click(function(event) { event.preventdefault(); $(this).parent().addclass("current"); $(this).parent().siblings().removeclass("current"); var tab = $(this).attr("href"); $(".tab-content").not(tab).css("display", "none"); $(tab).fadein(); }); $("#mm0").change(function(event) { //alert(); event.preventdefault(); var tab_index=$(this).find('option:selected').attr('rel'); //alert(tab_index); var current_sel_a=$('.tabs-menu li').removeattr('class'); $('a[href="' + tab_index + '"]').closest("li").addclass("current"); var tab = $(this).find('option:selected').attr('rel'); $(".tab-content").not(tab).css("display", "none"); $(tab).fadein(); }); class="snippet-code-css lang-css prettyprint-override">.tabs-menu { height: 30px; float: left; clear: both; margin:0 } .tabs-menu li { height: 30px; line-height: 30px; float: left; margin-right: 10px; background-color: #ccc; border-top: 1px solid #d4d4d1; border-right: 1px solid #d4d4d1; border-left: 1px solid #d4d4d1; list-style:none } .tabs-menu li.current { position: relative; background-color: #fff; border-bottom: 1px solid #fff; z-index: 5; } .tabs-menu li { padding: 10px; text-transform: uppercase; color: #fff; text-decoration: none; } .tabs-menu .current { color: #2e7da3; } .tab { border: 1px solid #d4d4d1; background-color: #fff; float: left; margin-bottom: 20px; width: auto; } .tab-content { width: 100%; padding: 20px; display: none; float:left; } .tab-content p{ display: block; float: left; margin: 0; width: 94%; } .mnav{ display:none; } #tab-1 { display: block; } @media screen , (max-width:600px){ .mnav{ display:block; } .tabs-menu{ display:none; } } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select class="mnav" id="mm0" > <option rel="#tab-1" selected="" value="">tab1</option> <option rel="#tab-2" value="">tab2</option> <option rel="#tab-3" value="">tab3</option> <option rel="#tab-4" value="">tab4</option> </select> <div id="tabs-container"> <ul class="tabs-menu"> <li class="current"><a href="#tab-1">tab 1</a></li> <li><a href="#tab-2">tab 2</a></li> <li><a href="#tab-3">tab 3</a></li> <li><a href="#tab-4">tab 4</a></li> </ul> <div class="tab"> <div id="tab-1" class="tab-content"> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. aliquam sit down amet purus urna. proin dictum fringilla enim, sit down amet suscipit dolor dictum in. maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit down amet porta odio est @ velit. sed nec turpis neque. fusce @ mi felis, sed interdum tortor. nullam pretium, est @ congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. quisque convallis facilisis fermentum. nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. curabitur ante mauris. integer placerat imperdiet diam, facilisis pretium elit mollis pretium. sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus @ tellus. donec imperdiet congue ligula, quis vulputate mauris ultrices non. aliquam rhoncus, arcu bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p> </div> <div id="tab-2" class="tab-content"> <p>donec semper dictum sem, quis pretium sem malesuada non. proin venenatis orci vel nisl porta sollicitudin. pellentesque sit down amet massa et orci malesuada facilisis vel vel lectus. etiam tristique volutpat auctor. morbi nec massa eget sem ultricies fermentum id ut ligula. praesent aliquet adipiscing dictum. suspendisse dignissim dui tortor. integer faucibus interdum justo, mattis commodo elit tempor id. quisque ut orci orci, sit down amet mattis nulla. suspendisse quam diam, feugiat @ ullamcorper eget, sagittis sed eros. proin tortor tellus, pulvinar @ imperdiet in, egestas sed nisl. aenean tempor neque ut felis dignissim ac congue felis viverra. </p> </div> <div id="tab-3" class="tab-content"> <p>duis egestas fermentum ipsum et commodo. proin bibendum consectetur elit, hendrerit porta mi dictum eu. vestibulum adipiscing euismod laoreet. vivamus lobortis tortor odio consectetur pulvinar. proin blandit ornare eros dictum fermentum. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos. curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. nullam posuere nunc ut justo sollicitudin interdum. donec suscipit eros nec leo condimentum fermentum. nunc quis libero massa. integer tempus laoreet lectus id interdum. integer facilisis egestas dui @ convallis. praesent elementum nisl et erat iaculis blandit ligula mollis. vestibulum vitae risus dui, nec sagittis arcu. nullam tortor enim, placerat quis eleifend in, viverra ac lacus. ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p> </div> <div id="tab-4" class="tab-content"> <p>proin sollicitudin tincidunt quam, in egestas dui tincidunt non. maecenas tempus condimentum mi, sed convallis tortor iaculis eu. cras dui dui, tempor quis tempor vitae, ullamcorper in justo. integer et lorem diam. quisque consequat lectus eget urna molestie pharetra. cras risus lectus, lobortis sit down amet imperdiet sit down amet, eleifend erat. suspendisse vel luctus lectus. sed ac arcu nisi, sit down amet ornare tellus. pellentesque nec augue nibh pharetra scelerisque quis sit down amet felis. nullam @ enim @ lacus pretium iaculis sit down amet vel nunc. praesent sapien felis, tincidunt vitae blandit ut, mattis @ diam. suspendisse ac sapien eget eros venenatis tempor quis id odio. donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p> </div> </div> </div>

jquery html css jquery-ui