sidebar - jquery mobile menu tabs appear on load -
i bumped jquery problem , ask guys help. created tabbed sidebar jquery, , need have current class on load, dont want on mobile version. i´m having problems remove class on window.resize method. can guys please tell doing wrong? best thanks!
$(document).ready(function () { $('ul li').click(function () { var tab_id = $(this).attr('data-tab'); $('ul li').removeclass('active'); $('.content').removeclass('current'); $(this).addclass('active'); $("#" + tab_id).addclass('current'); }) $(window).resize(function () { if ($(window).width() <= 500) { $('div.content').removeclass('current'); $('ul li').click(function () { var tab_id = $(this).attr('data-tab'); $("#" + tab_id).addclass('current'); }); $('div.back').click(function () { $(this).removeclass('current'); }); } }); })body { width: 100%; overflow-x: hidden; font-family: arial, helvetica, sans-serif; color: dimgrey; } /* header */ header { width: 100%; height: auto; padding: 20px 10px; border-bottom: solid 1px #464646; } header div { display: inline; font-size: 1rem; background-color: #464646; color: white; padding: 0.7rem 3rem; } /* container */ .container { width: 60%; margin: 0 auto; } .container article { float: left; width: 70%; } .container article ul { display: inline; list-style: none; } .container article ul li { float: left; margin: 4px; } /* aside */ /* nav */ aside { float: left; width: 30%; } aside nav { text-align: center; justify-content: center; } aside nav ul { display: inline-block; list-style: none; padding: 0; } aside nav ul li { display: inline-block; margin: 2px 0px; text-align: center; font-size: 10px; padding: 6px 6px 12px 6px; color: black; cursor: pointer; } .active { color: black; border-bottom: solid 1px black; } aside nav ul li img { display: block; width: 1.1rem; height: 1.1rem; margin: 4px auto 0 auto; } aside nav ul li p { margin: 0; } aside div { height: 100vh; overflow-x: scroll; padding: 12px; margin-left: 2px; } .content { display: none; } .content.current { display: inline-block; } .content.currentmobile { display: none; } aside .content img { width: 100%; height: auto; } aside .content label { font-size: 12px; } .content p { font-size: 14px; text-decoration: underline; } div .back { display: none; margin: 0px 0px; height: auto; } div .back { font-size: 18px; } /* mobile */ @media screen , (max-width: 500px) { body { width: 100vw; margin: 0; overflow-x: hidden; } header { overflow-x: hidden; width: 90vw; height: auto; border-bottom: solid 1px #464646; } .container { width: 90vw; } .container article { width: 100%; } aside nav { position: fixed; right: 0; top: 10%; background: white; } aside nav ul li { display: block; width: 2rem; height: 2rem; } aside nav ul li p { margin: 0; display: none; } aside nav ul li.active { color: black; border-bottom: 0; } aside div.content.current { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; } div .back { display: inline; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tab-1" role="content" aria-label="figures content" class="content current"> <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> back</div> <img src="img/figure1.jpg" alt="figure 1" id="fig1" value="fig1"> <label for="fig1">fig. 1 lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt</label> <hr/> <img src="img/figure2.png" alt="figure 2" id="fig2" value="fig2"> <label for="fig2">fig. 2 lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt</label> <hr/> <img src="img/figure3.png" alt="figure 3" id="fig3" value="fig3"> <label for="fig3">fig. 3 lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt</label> <hr/> </div> <!-- references --> <div id="tab-2" role="content" aria-label="references content" class="content"> <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> back</div> <h3>lorem</h3> <hr> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h3>lorem</h3> <hr> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <!-- related --> <div id="tab-3" role="content" aria-label="related content" class="content"> <div class="back"><i class="fa fa-angle-left" aria-hidden="true"></i> back</div> <h3>title</h3> <hr> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h3>title</h3> <hr> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h3>competing interests</h3> <hr> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>
Comments
Post a Comment