: цель не работает, чтобы изменить текстовому-цветный

Question

StackOverflow, долгое время не виделись

Итак, я нахожусь в процессе превращения моего сайта в чистом CSS3 - просто для удовольствия, или в основном не использовать JQuery , И я столкнулся с небольшой проблемой при попытке обновить текущее меню.

Страница «одна страница» в некотором роде, поэтому существует только 1 index.html. Проблема заключается в том, что я в настоящее время с помощью JQuery, чтобы изменить текстовый цвет текущего раздела/страницы следующим образом:

Меню:

<div id="menuDiv"> 
       <ul class="menu" id="menu"> 
        <li> 
         <a href="#about" class="2 scroll" onclick="setMenuStyle(this); return false;">about</a> 
        </li> 
        <li> 
         <a href="#background" class="3 scroll" onclick="setMenuStyle(this);">background</a> 
        </li> 
        <li> 
         <a href="#mindset" class="4 scroll" onclick="setMenuStyle(this);">mindset</a> 
        </li> 
        <li> 
         <a href="#vision" class="5 scroll" onclick="setMenuStyle(this);">vision</a> 
        </li> 
        <li style="margin-top: 0.93em"> 
         <a href="#home" class="1 scroll" title="HOME"><img src="gfx/home.png" alt="HOME" /></a> 

         <a href="https://dk.linkedin.com/in/rbfmnpwr" target="_blank" title="LinkedIn"><img src="gfx/linkedin.png" alt="LinkedIn" /></a> 

         <a href="#contact" class="6 scroll" title="Contact"><img src="gfx/contact.png" alt="Contact" /></a> 
        </li> 
        <li> 
         <a href="#thanks" class="7 scroll"></a> 
        </li> 
       </ul> 
      </div> 

JQuery

jQuery.noConflict(); 

jQuery(document).ready(function() { 
    getHash(); 
}); 

// Keep track of our current state 
currentSection = 1; 

function getHash() { 

    jQuery('.scroll').on('click', function() { 
     // Get our new state 
     var nr = parseInt(jQuery(this).attr('class').split(' ')[0]); 
     // Calculate the difference, with element height of 560px using formular dest = (newPows - currentPos) * elmHeight 
     var scrollTop = (nr - currentSection) * 560; 
     jQuery('#contentDiv').animate({ 
      scrollTop: scrollTop 
     }, 400); 
     return false; 

    }); 
} 

function setMenuStyle(ele) { 
    // Reset menu 
    jQuery("#menu li a").each(function() { 
     var child = jQuery(this); 
     child.attr('style', ''); 
    }); 

    // Set menu style 
    ele = jQuery(ele); 
    ele.attr('style', 'color:#009688;'); 
} 

Тем не менее, я хотел бы, чтобы это изменение цвета было чисто CSS. Так что я, однако, «эй, почему бы не использовать: цель для этого, но это просто не работает, и я не знаю почему.

Answer 1

Вы не можете определить положение полосы прокрутки, используя чистый CSS. :target используется для стиля элемента, когда его id есть ссылка на якорем, или как MDN ставит его:

: мишень псевдо-класс представляет собой единственный элемент, если таковые имеются, с идентификатором, соответствующим идентификатор фрагмента от URI документа.

Например, если URI равен http://example.com/index.html#heading1, элемент с id="heading1" может быть создан с использованием псевдоселектора :target.

Вот working example.

Другие интересные вещи вы можете сделать с :target:

• Pure CSS Modals
• Pure CSS Side Menu
• Pure CSS Slidshow