Prev Demo
Bootstrap
>
Scrollspy With Javascript Events
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> body { position: relative; } #dnf { padding-top: 40px; height: 300px; color: #fff; background-color: red; } #tec { padding-top: 40px; height: 300px; color: #fff; background-color: black; } #child { padding-top: 40px; height: 300px; color: #fff; background-color: orange; } #on { padding-top: 40px; height: 300px; color: #fff; background-color: pink; } #off{ padding-top: 40px; height: 300px; color: #fff; background-color:green; } </style> <script> $(document).ready(function () { removeSection = function (e) { $(e).parents("body > div").remove(); $('body').each(function () { $(this).scrollspy('refresh'); }); }; $("body").scrollspy({ target: ".navbar"}); }); </script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <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="#">SN ITFunda</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#dnf">DotNetFunda</a></li> <li><a href="#tec">TechFunda</a></li> <li><a href="#child">KidsFunda</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ITFunda <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#on">Online training</a></li> <li><a href="#off">Offline training</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="dnf" class="container-fluid"> <h1>DotNetFunda <a href="#" onclick="removeSection(this);">× Close</a></h1> <p> DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career.</p> </div> <div id="tec" class="container-fluid"> <h1>TechFunda <a href="#" onclick="removeSection(this);">× Close</a></h1> <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. </p> </div> <div id="child" class="container-fluid"> <h1>KidsFunda <a href="#" onclick="removeSection(this);">× Close</a></h1> <p>KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc </p> </div> <div id="on" class="container-fluid"> <h1>Online training <a href="#" onclick="removeSection(this);">× Close</a></h1> <p>ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training</p> </div> <div id="off" class="container-fluid"> <h1>Offline training<a href="#" onclick="removeSection(this);">× Close</a></h1> <p> ITFunda provides Offline training for the people whoe needs class room training ITFunda provides Offline training for the people whoe needs class room training ITFunda provides Offline training for the people whoe needs class room training ITFunda provides Offline training for the people whoe needs class room training ITFunda provides Offline training for the people whoe needs class room training ITFunda provides Offline training for the people whoe needs class room training</p> </div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
