html 페이지의 제목을 클릭 한 텍스트 패널로 변경하는 방법

html 페이지에서 확장 가능한 패널이 있습니다. 각 패널에는 3 개 또는 4 개의 콘텐츠가 있습니다. 사용자가 각 패널을 사용할 때 제목을 사용하여 패널 이름을 변경하고 싶습니다.html 페이지의 제목을 클릭 한 텍스트 패널로 변경하는 방법

다음 자바 스크립트 코드입니다.

다음은 CSS 코드입니다.

body { font: 12px Tahoma, Geneva, sans-serif; } 

#horizonal-bar1 h1 { 
    font-size:20px; 
    text-align: center; 
    background-color:#d3d3d3; 
    color: #333333; 
} 

/* panel */ 
.panel, .panelcollapsed 
{ 
    background: #eee; 
    margin: 5px; 
    padding: 0px 0px 5px; 
    width: 300px; 
    border: 1px solid #999; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
} 

/* panel heading */ 
.panel h2, .panelcollapsed h2 
{ 
    font-size: 18px; 
    font-weight: normal; 
    margin: 0px; 
    padding: 4px; 
    background: #CCC url(arrow-up.gif) no-repeat 280px; 
    border-bottom: 1px solid #999; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-top: 1px solid #FFF; 
    border-right: 1px solid #FFF; 
    border-left: 1px solid #FFF; 
} 

/* panel heading on rollover */ 
.panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; } 

/* heading of a collapsed panel */ 
.panelcollapsed h2 
{ 
    background: #CCC url(arrow-dn.gif) no-repeat 280px; 
    border-color: #CCC; 
} 

/* panel content - do not set borders or paddings */ 
.panelcontent 
{ 
    background: #EEE; 
    overflow: hidden; 
    } 

/* collapsed panel content */ 
.panelcollapsed .panelcontent { display: none; }

다음은 HTML 코드입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Panels Demo</title> 
<link href="main.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="utils.js"></script> 
</head> 

<body> 
<div class="horizonal-bar1"> 
<h3>Test</h3> 
</div> 

<div class="panel"> 
<h2>One panel</h2> 
<div class="panelcontent"> 
    <link rel="parent" href="wildcats.htm" target="_blank"> 
    <p><a href = "www.yahoo.com">Test1</a></p> 
</div> 
</div> 

<div class="panel"> 
<h2>Another panel</h2> 
<div class="panelcontent"> 
    <p>Content goes here</p> 
    <p>More content</p> 
    <p>More content</p> 
</div> 
</div> 

<div class="panelcollapsed"> 
<h2>Initially Collapsed</h2> 
<div class="panelcontent"> 
    <p>This panel is collapsed by default (until user sets a preference)</p> 
</div> 
</div> 
<a href="javascript:expandAll()">Expand</a> 
<a href="javascript:collapseAll()">Collapse</a> 
</body> 
</html>

HTML 페이지에서 기본 제목은 "테스트"입니다. "One Panel", "Another Panel", "Collally Collated"를 클릭하면 내가 클릭 한 이름의 제목을 원하게됩니다.

알려 주시기 바랍니다.

출처

2014-08-29 Teruko Kobayashi

이 문제는 jQuery로 구현하는 것이 훨씬 쉽습니다.

귀하의 솔루션이 jQuery없이 javascript에 있었기 때문에 나는 javascript에서 권장 사항을 제공 할 것입니다.

SetUpPanels()에 대한 호출을 트리거해야합니다.

window.onload = function(){setUpPanels();}

document.getElementsByTagName()은 목록을 반환합니다. 특정 요소에 대해 작업하려면 배열에서 요소에 액세스해야합니다. 귀하의 예제에서 제목은 발견 된 첫 번째 제목 요소이므로 [0]으로 배열을 인덱싱합니다. 요소가 발견되었는지 확인하기위한 점검을 추가했습니다.

function changetext(name) 
{ 

    loadSettings(); 
    var list = document.getElementsByTagName(HEADING_TAG); 
    if (list.length > 0) { 
    var element = list[0]; 
    element.innerHTML = name; 
    document.getElementsByTagName(HEADING_TAG).innerHTML=name; 
    } 
}

이 경우 더 나은 기술은 id를 주 제목 요소에 할당하는 것입니다. 그런 다음 getElementById()를 사용하여 해당 id로 단일 요소를 반환 할 수 있습니다.

출처

2014-08-30 00:11:49 terrywb

답장을 보내 주셔서 감사합니다. 그러나 loadSettings(); changetext (name) 함수 내에서 작동하지 않습니다. 특정 코드를 알려주시겠습니까? 감사합니다 –

http://jsfiddle.net/zoj49taq/ – terrywb

괜찮 았는데, 지금은 패널을 확장 할 수 없습니다. 나는 utility.js의 마지막에 다음 코드를 삽입하는 것을 잊었다 // 등록 setUpPanels로드 에서 실행되는 경우 (window.addEventListener) { \t //은 "적절한"방법 \t window.addEventListener (" 로드 ", setUpPanels, 거짓); 다른 } 경우 (window.attachEvent) { \t // IE의 방법 \t window.attachEvent ("온로드", setUpPanels); } –

html 페이지의 제목을 클릭 한 텍스트 패널로 변경하는 방법

답변

관련 문제