URL 해시를 사용하여 특정 탭에서 페이지 열기
P粉317679342
2023-09-04 14:33:50
<p>물론 제가 해시를 처음 접했기 때문에 이에 대해 조금 헤매긴 했지만 이것이 제 문제에 대한 해결책이 될 수 있다고 생각하므로 여기 누군가가 좀 더 통찰력을 가질 수 있기를 바랍니다. 여러 개의 "탭"(버튼을 클릭할 때까지 정보를 숨기는 div와 버튼을 클릭할 때까지 다른 모든 정보를 숨기는 div)이 있는 웹페이지가 있고 다른 웹페이지에서 특정 탭을 열 수 있기를 원합니다. .< ;/p>
<p>이전 웹페이지의 뼈대입니다. 페이지를 정기적으로 탐색하면 기본적으로 첫 번째 div가 표시됩니다. </p>
<pre class="brush:php;toolbar:false;"><div id="first" class="수수료">
콘텐츠
</div>
<div id="두 번째" class="commission" style="display:none;">
콘텐츠
</div>
<div id="세 번째" class="commission" style="display:none;">
콘텐츠
<p>이 페이지에는 이러한 div 사이를 전환하기 위해 클릭할 수 있는 버튼이 있습니다. </p>
<pre class="brush:php;toolbar:false;"><button class="commissiontab" onclick="commissionType(event, 'first')>first</button>
<button class="commissiontab" onclick="commissionType(event, 'second')">두 번째</button>
<button class="commissiontab" onclick="commissionType(event, 'third')">세 번째</button></pre>
<p>이 둘 사이를 전환하는 자바스크립트는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">function CommissionType(evt, CommissionName) {
var i,commissiontab;
var x = document.getElementsByClassName("커미션");
for (i = 0; i < x.length; i++) {
x[i].style.display = "없음";;
}
Commissiontab = document.getElementsByClassName("commissiontab");
for (i = 0; i < x.length; i++) {
Commissiontab[i].className = Commissiontab[i].className.replace("선택됨", "");
}
window.scrollTo({ top: 0, 동작: 'smooth' });
evt.currentTarget.className += " 선택됨"
document.getElementById(commissionName).style.display = "그리드";;
}</pre>
<p>이 버튼을 다른 페이지("index.html")에 배치하고 싶지만 "세 번째"를 클릭하면 새 페이지("commissiontypes.html") "세 번째"로 이동하게 됩니다. 기본 "첫 번째"입니다. </p>
<p>해시를 사용하는 것 외에 다른 해결 방법이 있다면 듣고 싶습니다. 자세히 살펴봐주셔서 감사합니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
처음에는
으아악'commission'类隐藏所有元素，然后在页面加载时根据location.hash를 사용하여 요소 중 하나만 표시할 수 있습니다. 이런 식으로 Commissiontypes.html(및 Commissiontypes.html#first)은 첫 번째 div를 표시하고 Commissiontypes.html#second는 두 번째 div를 표시하는 등입니다(또는 쿼리 매개변수를 사용하여 이 섹션을 표시하는 것을 고려할 수도 있습니다.)