"One-pager / Slider with Navigation"
Bootstrap 4.1.1 Snippet by Marnoweb

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div role="tabpanel"> <!-- Nav tabs --> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap.js</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="top"> <ul class="nav navbar-nav"> <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Link <span class="sr-only">(current)</span></a></li> <li><a href="#slide1" aria-controls="slide1" role="tab" data-toggle="tab">Link</a></li> <li><a href="#slide2" aria-controls="slide2" role="tab" data-toggle="tab">Link</a></li> <li><a href="#slide3" aria-controls="slide3" role="tab" data-toggle="tab">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- Tab panes --> <div class="tab-content container"> <div role="tabpanel" class="tab-pane fade in active" id="home"> <div class="row"> <div class="col-md-8 col-md-offset-4"> <article class="panel panel-default tab-content"> <header class="panel-heading"> <h1>Topic_1</h1> </header><!--/header--> <div class="panel-body"> <figure class="figure pull-left"> <img src="http://placehold.it/300/000" alt="placeholder" class="img-responsive "> <figcaption class="text-center">Picture</figcaption> </figure> <div class="well">You can use this snippet as a onepager. The js will add a #id to the url. When the page is refreshed as a bookmark with an ID, the appertaining .tab-pane will be opened. Thus the tab is bookmarkable.</div> </div><!--/.panel-body --> </article><!--/.article--> </div><!--/.col--> </div><!--/.row--> </div><!--/.tab-pane --> <div role="tabpanel" class="tab-pane fade" id="slide1"> <div class="row"> <div class="col-md-8 col-md-offset-4"> <article class="panel panel-default tab-content"> <header class="panel-heading"> <h1>Topic_2</h1> </header><!--/header--> <div class="panel-body"> <figure class="figure pull-left"> <img src="http://placehold.it/300/000" alt="placeholder" class="img-responsive "> <figcaption class="text-center">Picture</figcaption> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, modi ullam soluta atque quis consequuntur nulla perspiciatis error dolor impedit. </div><!--/.panel-body --> </article><!--/.article--> </div><!--/.col--> </div> </div> <div role="tabpanel" class="tab-pane fade" id="slide2"> <div class="row"> <div class="col-md-8 col-md-offset-4"> <article class="panel panel-default tab-content"> <header class="panel-heading"> <h1>Topic_3</h1> </header><!--/header--> <div class="panel-body"> <figure class="figure pull-left"> <img src="http://placehold.it/300/000" alt="placeholder" class="img-responsive "> <figcaption class="text-center">Picture</figcaption> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, modi ullam soluta atque quis consequuntur nulla perspiciatis error dolor impedit. </div><!--/.panel-body --> </article><!--/.article--> </div><!--/.col--> </div></div> <div role="tabpanel" class="tab-pane fade" id="slide3"> <div class="row"> <div class="col-md-8 col-md-offset-4"> <article class="panel panel-default tab-content"> <header class="panel-heading"> <h1>Topic_4</h1> </header><!--/header--> <div class="panel-body"> <figure class="figure pull-left"> <img src="http://placehold.it/300/000" alt="placeholder" class="img-responsive "> <figcaption class="text-center">Picture</figcaption> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, modi ullam soluta atque quis consequuntur nulla perspiciatis error dolor impedit. </div><!--/.panel-body --> </article><!--/.article--> </div><!--/.col--> </div> </div> </div> </div>
/*CSS is not necessary for your presentation. Feel free to alter everything to your liking*/ body{ min-height:90vh; background:#000; color:#000; font-family:"Calibri"; text-shadow:0 1px rgba(255,255,255,0.7); } .figure figcaption{ background:#000; color:#fff; text-shadow:0 1px rgba(255,255,255,0.9); } .figure { margin:0 1em; }
$('a[data-toggle="tab"]').click(function (e) { //add #id to the url window.location.hash = $(e.target).attr('href').substr(1); }) //if url has a #hash, meaning, is a bookmark, the apperatining tab is opened if(window.location.hash){ $('#top').find('a[href="'+window.location.hash+'"]').tab('show'); }

Related: See More


Questions / Comments: