javascript - 입력 라디오 속성이 기본적으로 선택되어 있습니다. 페이지를 새로 고친 후에 표시된 효과가 선택되지 않는 이유는 무엇입니까?

Question

으아악

입력 후 기본 표시 효과는 다음과 같습니다.

이제 선택되지 않은 상태는 다음과 같습니다.

입력 속성을 확인했습니다: <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>, 새로고침한 후 왜 ' 표시되지 않나요? 라벨을 다시 클릭해야만 숨겨진 콘텐츠가 표시되나요?

저는 js를 쓴 게 아니고 전부 CSS였어요.

감사합니다!

Answer 1

djyuning님 감사합니다:

으아아아 으아아아

Answer 2

귀하의 HTML 구조가 잘 이해가 되지 않습니다. 제 생각에는 위쪽 버튼과 아래쪽 콘텐츠가 평행해야 하는데 귀하의 것은 수직입니다.

또한 동일한 이름이 설정되어 있는 한 input:radio는 선택 항목을 자동으로 전환할 수 있으며 스크립트에서 선택 항목을 변경하는 것은 의미가 없습니다.

$(#selector)[0].checked 상태를 확인하고 여기에서 [0]에 주의하세요. 속성을 읽으려면 jQuery 객체를 Dom 객체로 변환해야 합니다!

prop(name,bool)입니다. attr을 사용하지 마세요!

해결책에 대해 이야기하자면,
먼저 페이지가 로드될 때 선택되도록 첫 번째 입력에 checked 속성을 추가해야 합니다.
그런 다음 js를 사용하여 모든 입력 상태를 탐색하는 데 사용되는 청취 방법을 만들어야 합니다.
다음으로 변경 이벤트를 입력에 바인딩하고 값이 변경되면 상태를 다시 순회해야 합니다.
마지막으로, 클릭한 후 페이지를 다시 새로 고치고 방금 클릭한 위치를 강조 표시하려면 쿠키 플러그인을 사용해야 할 수도 있습니다.
원리: 페이지가 로드되고 초기화되고 한 번 순회되고 양식이 선택된 다음 다시 순회됩니다.