: 대상 텍스트 색을

Question

유래를 변경 작동하지 않는, 시간이 더 그래서

를 참조, 나는 순수 CSS3에 내 웹 사이트를 변환하는 과정에서 오전 없습니다 - 단지 그것의 재미를 위해, 또는 기본적으로 jQuery를 사용하지 . 현재 메뉴를 업데이트하려고 할 때 작은 문제가 발생했습니다.

페이지는 어떤 방식 으로든 "한 페이지"이므로 한 개의 index.html 만 있습니다.

메뉴 :

<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;'); 
} 

문제는 내가 현재 다음과 같이 현재 섹션/페이지의 텍스트 색상을 변경 jQuery를 사용하고 있다는 것입니다 그러나 나는이 색상 변경을 순전히 CSS로하고 싶습니다. 그래서 나는 "헤이, 왜 사용하지 않는 것일까?"라고 말하고 싶다.하지만 작동하지 않는 이유는 모른다.

Answer 1

순수 CSS를 사용하여 스크롤 바의 위치를 ​​감지 할 수 없다. :target는 id가 앵커에 대해 참조되는 요소의 스타일을 사용하거나 MDN이 말하듯 :

: 대상 가상 클래스 프래그먼트 식별자와 일치하는 ID가있는 경우, 상기 고유 원소를 나타내고 문서의 URI의 예 :

예를 들어 URI가 http://example.com/index.html#heading1 인 경우, id="heading1"이있는 요소는 :target 의사 선택기를 사용하여 스타일을 지정할 수 있습니다.

여기에 working example이 있습니다. 당신이 :target로 할 수있는

다른 멋진 물건 : 빠른 응답을위한

• Pure CSS Modals
• Pure CSS Side Menu
좋아
• Pure CSS Slidshow