>

var NavLinks = document.querySelectorAll('.nav-link');
var circuses = document.querySelectorAll('.circle');

for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function () {      
        for (var i = 0; i < circuses.length; i++) {
           var circle = circuses[i];
           circle.style.display='none';
        }
        var theLastChild = navLink.lastChild;
        theLastChild.style.display='block';   
      
    }
    );  
  }

.nav-container{   
    height: 10px;
    background: white;
    padding: 30px 0px 40px 0px;  
    margin-left: 18%;
    margin-right: 18%;     
}
.nav-body  ul{
    text-align: right;
}
.nav-body  ul li{
    display: inline- block;
    float: left;
    margin-right: 30px;    
}
#logo{
    margin-right: 0px;
}
.nav-body ul li{
    line-height: 0.6;
}
#logo{    
    margin-top: -10px;
} 
#logo-light-blue{
    color: #5dc5ef;
    font-weight: 900;
}
#logo-dark-blue{
    color: #1885c8;
    font-weight: 900;
}
.circle {
    display: none;
	width: 8px;
	height: 8px;
	background: #5dc5ef;
	/* -moz-border-radius: 50px;
	-webkit-border-radius: 50px; */
    border-radius: 4px;
    margin: auto;
    margin-top: 7px;
}

<header class="nav-container">
        <nav class="nav-body">
            <ul>
                <li class="nav-link"><a  href="#">צור קשר</a>
                <div class="circle"></div></li>
                <li class="nav-link"><a href="#">המלצות ומאמרים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">שאלות נפוצות</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ד"ר שי מרון אלדר</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ההליכים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">ראשי</a>
                    <div class="circle"></div></li>
                <li id="logo"> <h3> <span id="logo-light-blue">  ד"ר </span><span id="logo-dark-blue"> שי מרון  אלדר  </span></h3><br>   
                        <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6></li>
            </ul>
        </nav>
    </header>

누가 누른 카테고리 메뉴에서 파란색 원을 만들어야합니다. 그러나 이제 파란색 원은 마지막 메뉴 범주에만 추가되었습니다. 어느 것을 눌렀는지 상관 없습니다. 누른 메뉴 범주의 마지막 자식을 찾고 있습니다. 그러나 모든 메뉴 범주의 마지막 자식 때마다 표시됩니다. 무엇이 잘못 되었나요?

>         


  • 답변 # 1

    HTML에 오류가 있습니다. 스팬 태그를 닫아야합니다.

               <li id="logo"> 
                  <h3> 
                    <span id="logo-light-blue">  ד"ר </span>
                    <span id="logo-dark-blue"> שי מרון  אלדר  </span>
                  </h3>
                  <br>   
                  <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6>
                 </li>
    
    

    그리고 ID 속성은 요소에 고유해야합니다. 원을 여러 곳에 ID로 반복합니다.

    <div id="circle"></div></li>
    
    

    이것으로 해결되지 않습니다. 데모 에서조차 결과가 모든 곳에 있기 때문에 질문을 더 잘 설명하십시오. CSS 나 스타일 라이브러리가 없습니까?

    편집 : 나는 당신이 원하는 것을 알고 있다고 생각합니다. 바이올린을 살펴보십시오. 여기에서 바이올린

    요소를 클릭하면 다른 요소에서 원을 제거해야합니까?

    원이 하나의 요소에만 있어야하는 경우 다른 요소에서 제거해야합니다. 다음을 보여주는 바이올린이 있습니다. 원이 1 개인 바이올린

    차이점 :

    var NavLinks = document.querySelectorAll('.nav-link');
    for (var i = 0; i < NavLinks.length; i++) {
        var navLink = NavLinks[i];
        navLink.addEventListener('click', function (event) {
                var allNavs = document.querySelectorAll('.nav-link div');
            for (var it = 0; it < allNavs.length; it++){
                console.log(allNavs[it]);
              allNavs[it].classList.add('invisible');
              allNavs[it].classList.remove('circleVisible');
             }
            console.log(allNavs);
                var targetElement = event.target || event.srcElement;
            var circleDiv = targetElement.parentNode.querySelectorAll('div');
            console.log(circleDiv[0]);
            circleDiv[0].classList.add('circleVisible');
            circleDiv[0].classList.remove('invisible');
            console.log(circleDiv[0]);
        }
        );  
      }
    
    

    console.logs를 남겼으므로 작동 방식을 확인하고 실제 코드를 실행할 때 제거하십시오 :)

  • 답변 # 2

    내가 보는 첫 번째 큰 문제는 루프에 중첩되어 있지만 사용하고 있다는 것입니다i의 동일한 반복자 변수. 다음 루프로 가려면 다른 변수를 가지려면 내부 루프가 필요합니다. 이와 같은 상황에서는 쉽게하기 때문에 종종ii를 사용합니다.

    더욱이, 당신은 원형 교차로에서 이것을하고있는 것 같습니다. 필요한 것이 무엇인지는 확실하지 않지만 표시되는대로이 솔루션이 더 간단합니다.

    CSS

    .circle {
        display: none;
        ... other attributes
    }
    .active-menu-item > .circle {
        display: block;
    }
    
    

    자바 스크립트

    var NavLinks = document.querySelectorAll('.nav-link');
    for (var i = 0; i < NavLinks.length; i++) {
        var navLink = NavLinks[i];
        navLink.addEventListener('click', function () {      
            for (var ii = 0; ii < NavLinks.length; ii++) {
               NavLinks[ii].classList.remove("active-menu-item");
            }
            navLink.classList.add("active-menu-item");
        });  
    }
    
    

관련 자료

  • 이전 python - 객체 데이터에 작용하지 않는 메소드를 정적으로 만들어야합니까?
  • 다음 java - ResultSet이 닫힌 후 작업이 허용되지 않음, mysql