Prevent bootstrap loading by adding URL hash

Question

I applied scrollspy Bootstrap 3.0 as follows:

<nav id="navProposalPreview"> <ul class="nav navbar-nav"> <li class="active"><a href="#previewTitlePage">Title Page</a></li> <li><a href="#previewDisplay">Display</a></li> <li><a href="#previewAddlServices">Additional Services</a></li> </ul> </nav> <div class="modal-body"> <div> <p id="previewTitlePage"></p> <div>Stuff</div> <p id="previewDisplay"></p> <div>Other stuff</div> <p id="previewAddlServices"></p> <div>Last stuff</div> </div> </div> 

I initialize it as follows:

 $('.modal-body').scrollspy({ target: '#navProposalPreview', offset: 20 }); 

It sets the active li , as expected, as you scroll, and also allows you to navigate sections using links. The problem is that when you click on the links, it will add a link to the url in the hash, for example. mysite.com/#previewDisplay. I do not want the url to be altered at all.

I came across this before in tabs, which I suppose, and I forgot if I needed to set data-parent or add a click event as follows:

 $previewModal.find('#navProposalPreview a').on('click', function (e) { e.preventDefault(); return false; }); 

Adding data-parent does not apply to scrollspy, for example, for tabs, and the click event above results in a link not being moved.

Thanks in advance.

Answer 1

ok here it goes through bootstrap

 **"To keep URLs intact, use the data-target attribute instead of href="#"."** 

like this

 data-target="#" 

http://getbootstrap.com/javascript/#dropdowns

here is a working example of a violin sorry for the confusion! data-target="#navbar" for the container where the binding is bound to