<html>
<head>
<link rel = stylesheet href = bootstrap/css/bootstrap.min.css>
<script src = bootstrap/scripts/jquery.min.js></script>
<script src = bootstrap/js/bootstrap.min.js></script>
<script>
$(document).ready(function(){
removeSection = function(e) {
$(e).parents(.subject).remove();
$('[data-spy=scroll]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$(#Navexample).scrollspy();
// The event is fired when an item gets actived with the scrollspy
$(#Navexample).on('activate.bs.scrollspy', function () {
var currentSection = $(.nav li.active > a).text();
$(#spyevent).html(Current Item being viewed >> + currentSection);
})
});
</script>
<style>
.scroll-Box {
height: 250px;
position: relative;
overflow: auto;
font-size:2em;
}
</style>
</head>
<body>
<div class = container>
<nav id = Navexample class = navbar navbar-default role = navigation>
<!-- Nav Bar -->
<div class = navbar-header>
<button type = button class = navbar-toggle
data-toggle = collapse data-target = #navbarCollapse>
<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 = #>Tutorials Point</a>
</div>
<!-- Links and Sublinks -->
<div class = collapse navbar-collapse id = navbarCollapse>
<ul class = nav navbar-nav>
<li class = active><a href = #subject-1>Subject 1</a></li>
<li><a href = #subject-2>Subject 2</a></li>
<li class = dropdown><a href = # class = dropdown-toggle
data-toggle = dropdown>Subject 3<b class = caret></b></a>
<ul class = dropdown-menu>
<li><a href = #subject-3-1>Subject 3.1</a></li>
<li><a href = #subject-3-2>Subject 3.2</a></li>
<li><a href = #subject-3-3>Subject 3.3</a></li>
</ul>
</li>
<li><a href = #subject-4>Subject 4</a></li>
</ul>
</div>
</nav>
<div class = scroll-Box data-spy = scroll data-offset = 0>
<div class = subject>
<h3 id = subject-1>Subject 1
<small><a href = # onclick = removeSubject(this);>Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = subject>
<h3 id = subject-2>Subject 2
<small><a href = # onclick = removeSubject(this);>Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = subject>
<h3 id = subject-3>Subject 3
<small><a href = # onclick = removeSubject(this);> Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = subject>
<h4 id = subject-3-1>Subject 3.1
<small><a href = # onclick = removeSubject(this);> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = subject>
<h4 id = subject-3-2>Subject 3.2
<small><a href = # onclick = removeSubject(this);> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = subject>
<h4 id = subject-3-3>Subject 3.3
<small><a href = # onclick = removeSubject(this);>Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = subject>
<h3 id = subject-4>Subject 4
<small><a href = # onclick = removeSubject(this);>Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<h4 id = spyevent class = text-info></h4>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。