활성, 토글 가능 탭에 이미지 추가 HTML/CSS

내 웹 페이지의 "토글 가능 탭"탐색 모음을 만들려고합니다. w3schools 튜토리얼을 따라 토글 가능한 탭을 만드는 방법을 알아 냈습니다. 그러나 아래 그림과 같이 활성 탭을 향하는 위쪽 화살표가 있도록 모양을 수정하는 방법을 알아 내려고하지 않습니다. 아무도 이것을 달성하는 방법을 알고 있습니까? 여기 활성, 토글 가능 탭에 이미지 추가 HTML/CSS

는 태그에 대한 내 코드입니다 :

<ul class="navtabs"> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'about')">About</a></li> 
 
     <li><a href="study.html">How to Study</a></li> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'help')">Helpful Links</a></li> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'comment')">Comments</a></li> 
 
    </ul> 
 
    
 
    <div id="about"> 
 
     <h1>About</h1> 
 
     <p>HERE IS A DESCRIPTION OF ABOUT THE SITE YADAYADA</p> 
 
    </div> 
 
    <div id="help"> 
 
     <h1>Helpful Links</h1> 
 
     <p>THERE WILL BE LINKS HERE JUST U WAIT</p> 
 
    </div> 
 
    <div id="comment"> 
 
     <h1>Comments</h1> 
 
     <p>U CAN LEAVE COMMENTS HERE ABOUT UR OWN TIPS/TRICKS FOR STUDYING</p> 
 
    </div> 
 

 
    <script> 
 
     function openLink(evt, linkName){ 
 
      var i, tabcontent, tablinks; 
 
      tabcontent = document.getElementsByClassName("tabcontent"); 
 
      for(i = 0; i < tabcontent.length; i++){ 
 
       tabcontent[i].style.display = "none"; 
 
      } 
 
      tablinks = document.getElementsByClassName("tablinks"); 
 
      for(i = 0; i < tablinks.length; i++){ 
 
       tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
      } 
 
      document.getElementById(linkName).style.display = "block"; 
 
      evt.currentTarget.className += " active"; 
 
     } 
 
    </script>

이 좋아, 그래서 페이지가 사용하는 요소를 검사를 통해 발견 된 테두리 바닥과의 다음이 이미지 위쪽 화살표

활성화되었을 때 이미지를 탭에 표시하려면 어떻게해야합니까?

출처

2016-09-22 crin

나는이 결과를 얻을 단순히 CSS

ul.navtabs li a:focus, .active{ 
 
    background-image: url(../../arrow.png); 
 
    background-position-x: center; 
 
    background-position-y: bottom; 
 
    background-size: initial; 
 
    background-repeat: no-repeat; 
 
    
 
}

이를 추가하여 알아 냈어요 :

이제

I가있어를 border.png를 경계로 바닥을 감싸는 방법을 알아보십시오. 누구든지 그 일을하는 방법을 알고 있다면 크게 감사하겠습니다. 그래도 해결 방법을 찾는 것이 어려울 것이라고 생각합니다.

출처

2016-09-22 18:38:16 crin

새 클래스를 < li> 요소 (예 : "활성")에 추가하고 이미지 (클래스 :: 후)에 이미지 스타일을 지정하십시오. 그런 다음 다른 메뉴 요소를 클릭 할 때이 클래스를 제거하십시오 (jQuery는 웹 사이트에서 사용하는 경우에도 유용 할 것입니다). 또한 클릭 된 요소에이 클래스를 추가하십시오.

출처

2016-09-22 17:48:23

활성, 토글 가능 탭에 이미지 추가 HTML/CSS

답변

관련 문제