2013-10-25 3 views
3

Я новичок на загрузчике и у меня есть вопрос о том, чтоBootstrap: как использовать navbar?

Если у меня есть код для выпадающего меню панели навигации, как этот

<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> 

Если я нажимаю один из меню ссылка будет включать в себя как это «www. ...../# menu1»

Вопрос в том, хочу ли я, чтобы содержимое отображалось в меню, которое я просто кликнул, как я могу это сделать?

<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> 

Я пробовал много раз, но он все еще показывает обе данные. Я включать от JavaScript (от начальной загрузки), как этот

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

ответ

3

Вам нужно использовать JQuery, чтобы показать, скрыть содержимое. Попробуйте это:

  1. Добавить класс = "содержание" к вашей диве и снимите # с ID

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

  2. Добавить событие JQuery вам нав ссылку

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

Надеюсь, что поможет // Редактировать

Смежные вопросы