someone someone - 4 months ago 6
HTML Question

Bootstrap: how to use navbar?

I'm new on bootstrap and I have a question about it

If I have a code for drop down menu nav bar like this

<div class="navbar-collapse collapse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#menu1">menu 1</a></li>
<li><a href="#menu2">menu 2</a></li>
<li><a href="#menu3">menu 3</a></li>
</ul>
</div>


If I click one of menu the link will include like this "www. ...../#menu1"

The question is if I want to make the content appear on the menu that I just click how can I do it?

<div class="container">
<!-- my rough idea is like this-->
<div id="#menu1"> content from menu 1</div>
<div id="#menu2"> Content from menu 2</div>
<div id="#menu3"> Content from menu 2</div>
</div>


I've tried many time but it still showing both of data.
I've include from JavaScript (from bootstrap) like this

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

Answer

You need to use jQuery to show hide the content. Try this:

  1. Add a class="content" to your divs and remove the # from ID

    <div id="menu1" class="content"> content from menu 1</div>

  2. Add a jQuery event to you nav links

    $(".dropdown-menu a").on('click',function(e) {
       e.preventDefault(); // stops link form loading
       $('.content').hide(); // hides all content divs
       $('#' + $(this).attr('href') ).show(); //get the href and use it find which div to show
    });
    

Hope that helps //Edit

Comments