Элементы навигации в заголовке меняются в зависимости от раздела

На моем веб-сайте у меня есть липкий заголовок с несколькими различными элементами навигации, которые при нажатии будут прокручиваться вниз, чтобы найти этот раздел на странице. Мне было интересно, как можно было бы настроить его так, чтобы элементы навигации меняли цвет, когда представление находится в соответствующем разделе. Другими словами, если зритель находится в разделе «x», «x» на панели навигации изменит цвет.

Обновление: вот код для панели навигации, которую я использую

<div class = 'nav-container'>
    <nav>
        <div id = 'nav-items-container'>
            <ul class='nav-items'>
                <li class='nav-item'><a href='#what'>what</a></li>
                <li class='nav-item'><a href='#how'>how</a></li>
                <li class='nav-item'><a href='#why'>why</a></li>
                <li class='nav-item'><a href='#who'>who</a></li>
                <li class='nav-item'><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>
</div>

немного CSS

.nav-container{
   background-color:black;
   height:50px;
   width:410px;
   font-size: 120%;
   position:absolute;
}



a:link{
    color:white;
}

a:visited{
    color:#58ACFA;
}
#nav-items-container ul li{
    display:inline;
}

#nav-items-container ul li a{
    padding: 20px;
    text-decoration:none;
}
#nav-items-container ul{
    margin:0;
    padding:0;
    list-style-type: none;
    text-align: center;
    padding-top:15px;
}

javascript html css header nav
person nictoriousface    schedule 15.07.2013    source источник
comment
Включение кода, который вы использовали для решения проблемы, повысит вероятность ответа.   -  person eebbesen    schedule 15.07.2013
comment
включите свой css, а также   -  person bot    schedule 15.07.2013
comment
Вы хотите, чтобы элемент навигации менялся при нажатии? Или когда страница прокручивается до той части страницы, которая относится к элементу навигации?   -  person hungerstar    schedule 15.07.2013
comment
последний. id хотел бы, чтобы он менялся в зависимости от раздела   -  person nictoriousface    schedule 15.07.2013

Ответы (3)


arrow_upward
1
arrow_downward

Если вы можете использовать jquery, вы можете сделать что-то вроде:

 <script type="text/javascript">
    $(function() {
        var sections = [],
            anchors = $('#nav-items-container a[href^="#"]'),  // anchor links with hash tags
            docHeight = $(document).height(),
            currentOffset,
            setNavActive;

        // handler to update the class  
        setNavActive = function(hash){
            anchors.removeClass('current-section');
            anchors.filter('a[href="' + hash + '"]').addClass('current-section');
        };
        
        // building our hash/start/end position map 
        $.each(anchors, function(i, item) {
            currentOffset = $(item.hash).offset().top;
            if (i > 0) {
                sections[i-1].end = currentOffset;
            }
            
            sections[i] = { 
                            hash: item.hash, 
                            start: (i == 0 ? 0 : currentOffset),
                            end: docHeight
                          };
        });
        
        // on scroll event, check which map fits, 
        // find the hash and set the class          
        $(document).scroll(function() {
            currentOffset = $(document).scrollTop();
            for (var i = 0; i < sections.length; i++) {
                if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
                    setNavActive(sections[i].hash);
                }
            }
        });
    });
</script>

Я добавил новый стиль, но вы можете сделать его вложенным или любым другим:

.current-section {background:pink; }

jsFiddle

http://jsfiddle.net/fstreamz/krb6Q/3/

person LUKE    schedule 15.07.2013

arrow_upward
0
arrow_downward

Здесь недостаточно информации, чтобы дать лучший ответ. Я могу дать один, который работает, хотя.

Измените заголовки, чтобы они выглядели так:

<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>

затем в теле каждой страницы поместите

<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>

Вам придется переключать его на каждой странице с правильным идентификатором. Традиционно это делается вручную с помощью встроенных стилей, если заголовок не загружается извне.

person Lockless    schedule 15.07.2013
comment
Проблема здесь в том, что весь сайт находится на одной странице. Цель состояла в том, чтобы изменить элемент навигации при просмотре этого раздела на одной странице. - person nictoriousface; 15.07.2013

arrow_upward
0
arrow_downward

Добавьте еще одно объявление CSS, как показано ниже, и примените стиль active к текущей странице.

#nav-items-container ul li.active a {
    color:red;
}

Примените вышеуказанный стиль следующим образом...

<li class='nav-item active'><a href='#what'>what</a></li>

демонстрация jsFiddle

person neo108    schedule 15.07.2013