Как сделать такой же верхний и нижний колонтитулы в бутстрапе?

Я хотел бы создать верхний и нижний колонтитулы в бутстрапе, так что страница, на которой я сейчас, будет отмечена тождественно.Как сделать такой же верхний и нижний колонтитулы в бутстрапе?

Например, если я выберу «Статьи», он будет выбран в заголовке, но я хочу, чтобы он также был выбран в нижнем колонтитуле.

Кроме того, я хочу, чтобы иметь возможность перемещаться по заголовку или через нижний колонтитул. То есть Я хочу, чтобы оба вели себя одинаково.

<nav class="navbars navbar-inverse">  
    <div class="container"> 

     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">My website</a> 
     </div>  

     <div class="collapse navbar-collapse" id="navbar-collapsable-section"> 
      <ul class="nav navbar-nav navbar-right">    
       <li class="active"><a href="index.html" id="menu_linkto_home">Home</a></li> 
       <li><a href="index.html" id="menu_linkto_articles">Articles</a></li> 
       <li><a href="aboutUs.html" id="menu_linkto_aboutus">About us</a></li>   
      </ul> 
     </div>     
    </div> 
</nav>

Как это сделать? Спасибо!

источник

2015-07-08 Yura

Как насчет использования имени класса вместо идентификатора и привязки его к функции jquery? – rohithpr

Я могу это сделать, но не знаю, как это сделать. Не могли бы вы получить более подробную информацию. Спасибо – Yura

Не могли бы вы разместить свой jquery-код? – rohithpr

Вы могли бы дать один и тот же класс CSS к ссылке в адресной строке заголовка и колонтитула, например, "Активный":

<style> 
    .active { 
     background: #ddd; 
    } 
</style>

Header Ссылка:

<a class="active" id="header-about-link" href="/about">About</a>

Footer Ссылка:

<a class="active" id="footer-about-link" href="/about">About</a>

Обе эти ссылки будут выглядеть одинаково и ссылаться на одно и то же место.

Если вам необходимо применить этот класс CSS динамически с помощью JQuery, вы могли бы использовать что-то вроде этого:

<script> 
    $('#header-about-link').addClass('active'); 
    $('#footer-about-link').addClass('active'); 
</script>

Надеется, что это помогает!

источник

2015-07-09 05:44:26

Спасибо Thomas (+1) – Yura

Вот действительно грубая версия того, что работает. Я намеренно использовал дополнительные имена используемых классов и т. Д., А не обход DOM, чтобы вы получили базовую идею.

<!DOCTYPE html> 
<html lang="en-US"> 
<header> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</header> 
<body> 
    <div> 
    <nav class="navbar navbar-inverse" style="border-radius:0px;"> 
     <div class="container-fluid"> 
     <div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li class="red active"><a href="#">red</a></li> 
       <li class="blue"><a href="#">blue</a></li> 
       <li class="green"><a href="#">green</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </nav> 
    </div> 

    <div class="box red_box" style="height:100px; width:100px; display:inherit; background-color:red"></div> 

    <div class="box blue_box" style="height:100px; width:100px; display:none; background-color:blue"></div> 

    <div class="box green_box" style="height:100px; width:100px; display:none; background-color:green"></div> 

    <br/> 
    <div> 
    <nav class="navbar navbar-inverse" style="border-radius:0px;"> 
     <div class="container-fluid"> 
     <div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li class="red active"><a href="#">red</a></li> 
       <li class="blue"><a href="#">blue</a></li> 
       <li class="green"><a href="#">green</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </nav> 
    </div> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.red').click(function(){ 
     $('.box').css('display', 'none') 
     $('.red_box').css('display', 'inherit') 

     $('.blue').removeClass('active') 
     $('.green').removeClass('active') 
     $('.red').attr('class', 'red active') 
    }) 

    $('.blue').click(function(){ 
     $('.box').css('display', 'none') 
     $('.blue_box').css('display', 'inherit') 

     $('.red').removeClass('active') 
     $('.green').removeClass('active') 
     $('.blue').attr('class', 'blue active') 
    }) 

    $('.green').click(function(){ 
     $('.box').css('display', 'none') 
     $('.green_box').css('display', 'inherit') 

     $('.blue').removeClass('active') 
     $('.red').removeClass('active') 
     $('.green').attr('class', 'green active') 
    }) 
    }) 
</script>

источник

2015-07-09 16:51:50 rohithpr

Как сделать такой же верхний и нижний колонтитулы в бутстрапе?

ответ

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