function changecontent(description){
console.log(description);
document.getElementById('content').innerHTML = description;
}<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>페이지에 대해 여러 레이아웃을 만들 계획이며 어떤 항목을 클릭했는지에 따라 내용이 그에 따라 변경되어야합니다. 문제는 자바 함수가 어떤 항목을 클릭했는지에 따라 내용을 다르게 변경하는 방법을 모른다는 것입니다.
따라서 내가 올바르게 이해한다면 #content에 동적으로 삽입하려는 각 주제에 대한 설명 텍스트가 여러 개 있습니다. 텍스트를 변수에 저장할 수 있습니다.
var mathDesc = "Math is awesome and <b>not scary at all!</b>";
그런 다음 다음과 같이 #content에 삽입 할 수 있습니다.
<li onClick="changecontent(mathDesc);">Math</li>
개인적으로 저는 다른 접근 방식을 사용합니다. 여러 개의 content-div를 갖고 매번 하나씩 만 숨기는 것입니다.
콘텐츠를 숨기는 한 가지 방법은 예를 들어 className을 프로그래밍 방식으로 할당하고 해당 클래스에 CSS 규칙으로 hidden할당 display:none하는 것입니다.
아래는 스 니펫의 예입니다. list-item-id를 기반으로 콘텐츠를 식별했는데, 원하는 작업이라고 생각합니다.
function changeContent(id) {
var content = document.getElementsByClassName("content");
for (var i = 0; i < content.length; i++) {
if (content[i].id === id + "Content") {
content[i].classList.remove("hidden");
} else {
content[i].classList.add("hidden");
}
}
}
document.getElementById("chooseSubject").onclick = function(e) {
changeContent(e.target.id);
}#chooseSubject {
list-style-type: none;
}
#chooseSubject li {
cursor: pointer;
}
#chooseSubject li:hover {
background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
background-color: rgb(167, 114, 169);
}
.hidden {
display: none;
}<ul id="chooseSubject">
<li id="Math">Math</li>
<li id="Science">Science</li>
<li id="Geography">Geography</li>
<li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
You learn about things that have no function in Arts.
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다