"ss"
Bootstrap 3.0.0 Snippet by varun3129

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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 class="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#about" data-toggle="tab">About</a></li> <li><a href="#stuff" data-toggle="tab">Stuff</a></li> </ul> <div class="tab-content"> <div id="about" class="tab-pane"> <h2>About</h2> <div class="cont1"><a href="#test" goto="stuff">Go to stuff</a></div><br> <div class="cont1"><a href="#test1" goto="stuff">Go to Content 1</a></div><br> <a href="#test2" goto="stuff">Go to Content 2</a> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> </div> <div id="stuff" class="tab-pane"> <div> <h2>Stuff</h2> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <div id="tab-con"><a name="test"></a></div> <h2>Anchor</h2> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <a name="test1"></a> <h2>Content</h2> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <div id="tab-con"><a name="test2"></a><h2>Content 2</h2> </div> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p> </div> </div> </div> <script> $('.cont1 a').not('.nav.nav-tabs li a').on('click', function(evt) { evt.preventDefault(); var whereTo = $(this).attr('goto'); $tabs = $("ul.nav.nav-tabs li"); $tabs.find('a[href=#' + whereTo + ']').trigger('click'); console.log('click'); //alert(attr('name')); //alert( $('#'+whereTo+' a').offset().top ); ('html, body').animate({ scrollTop: $('#'+whereTo+ 'a').offset().top }); }); </script>

Related: See More


Questions / Comments: