javascript - Switching and Loading One Tab from Many -
how can set code using javascript or jquery load 1 tab per time, in code tabs loaded in 1 time , takes memory @ same time, specially when story longer 2000 letter, 3 parts, page load 6000 letter @ same time, want load 1 part, , when switch tab, previous tab disappear , show new tab 2000 letter only.
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoiresju2yc3z8gv/npezwav56rsmlldc3r/azzgrngxqqknkkofvhfqhnuweyj" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-a7fzj7v+d/sdmmqp/noqwlilvusjfdhw+k9omg/a/eheadgtzns3hpfag6ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-dztdapbwprxsa/3eyeeuwrwcy7g5kfbe8ffjk5jaixuyhkkdx6qin1dkwx51bbrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vbwwzlzj8ea9acx4pew3rvhjgjt7zpknpzk+02d9phzyevke+jo0iegizqplforn" crossorigin="anonymous"></script> </head> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#part1" role="tab">part 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#part2" role="tab">part 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#part3" role="tab">part 3</a> </li> </ul> <!-- tab panes --> <div class="tab-content"> <div class="tab-pane active" id="part1" role="tabpanel"><b>story part 1</b> <br> lorem ipsum dolor sit amet, consectetur adipisicing elit. ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. libero fuga, suscipit eos rem voluptatibus. itaque sequi quaerat quidem doloribus. <br> bgm: <br><audio controls> <source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg"> </audio> </div> <div class="tab-pane" id="part2" role="tabpanel"><b>story part 2</b> <br> lorem ipsum dolor sit amet, consectetur adipisicing elit. ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. libero fuga, suscipit eos rem voluptatibus. itaque sequi quaerat quidem doloribus. <br> bgm: <br><audio controls> <source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg"> </audio></div> <div class="tab-pane" id="part3" role="tabpanel"><b>story part 3</b> <br> lorem ipsum dolor sit amet, consectetur adipisicing elit. ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. libero fuga, suscipit eos rem voluptatibus. itaque sequi quaerat quidem doloribus. <br> bgm: <br><audio controls> <source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg"> </audio></div> </div>my database is
[ title -- part1 -- part2 -- part3 ] [part 1 -- loremipusem -- loremipusem -- loremipusem] [part 2 -- loremipusem -- loremipusem -- loremipusem] [part 3 -- loremipusem -- loremipusem -- loremipusem] please give me 1 example how on 2 tabs @ least, i've checked code realized if loaded once, stays loaded
you can add placeholder data-src , when user clicks on tab switch src:
<audio id="sound1" preload="auto" data-src="http://www.jezra.net/audio/skye_boat_song.ogg" controls></audio>
$(".nav-tabs a").click( function () { var tab = $(this).attr('href'); var $el = $(tab).find('audio'); var src = $el.data('src'); $el.attr('src', src); }) https://jsfiddle.net/vtu8pz6y/
if want dynamically play, pause, etc:
$el[0].play() $el[0].pause()
Comments
Post a Comment