如何將html頁面的標題改爲點擊的文本面板

Question

我在html頁面中有可擴展的面板。每個面板有3或4個內容。 當用戶使用每個面板時，我想使用標題更改爲面板名稱。

以下JavaScript代碼。

var PANEL_NORMAL_CLASS = "panel"; 
    var PANEL_COLLAPSED_CLASS = "panelcollapsed"; 
    var PANEL_HEADING_TAG  = "h2"; 
    var HEADING_TAG   = "h3"; 
    var PANEL_CONTENT_CLASS = "panelcontent"; 
    var PANEL_COOKIE_NAME  = "panels"; 
    var PANEL_ANIMATION_DELAY = 20; /*ms*/ 
    var PANEL_ANIMATION_STEPS = 10; 


    function changetext(name) 
    { 

     loadSettings(); 
     var element = document.getElementsByTagName(HEADING_TAG); 
     element.innerHTML = name; 
     document.getElementsByTagName(HEADING_TAG).innerHTML=name; 
    } 

    function setUpPanels() 
    { 
     loadSettings(); 

     // get all headings 
     var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); 

    // go through all tags 
     for (var i=0; i<headingTags.length; i++) 
     { 
     var el = headingTags[i]; 

     // make sure it's the heading inside a panel 
     if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != 
     PANEL_COLLAPSED_CLASS) 
     continue; 

     // get the text value of the tag 
     var name = el.firstChild.nodeValue; 

     // look for the name in loaded settings, apply the normal/collapsed class 
     if (panelsStatus[name] == "false") 
      el.parentNode.className = PANEL_COLLAPSED_CLASS; 
     else 
     if (panelsStatus[name] == "true") 
      el.parentNode.className = PANEL_NORMAL_CLASS; 
     else 
     { 
      // if no saved setting, see the initial setting 
      panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false"; 
     } 

     // add the click behavor to headings 
     el.onclick = function() 
     { 
      var target = this.parentNode; 
      var name  = this.firstChild.nodeValue; 
       changetext(name); 
      var collapsed = (target.className == PANEL_COLLAPSED_CLASS); 
      saveSettings(name, collapsed?"true":"false"); 
      animateTogglePanel(target, collapsed); 
     }; 
     } 
     } 

    /** 
    * Start the expand/collapse animation of the panel 
    * @param panel reference to the panel div 
    */ 
    function animateTogglePanel(panel, expanding) 
    { 
    // find the .panelcontent div 
    var elements = panel.getElementsByTagName("div"); 
    var panelContent = null; 
    for (var i=0; i<elements.length; i++) 
    { 
     if (elements[i].className == PANEL_CONTENT_CLASS) 
     { 
      panelContent = elements[i]; 
      break; 
     } 
    } 

    // make sure the content is visible before getting its height 
    panelContent.style.display = "block"; 

    // get the height of the content 
    var contentHeight = panelContent.offsetHeight; 

    // if panel is collapsed and expanding, we must start with 0 height 
    if (expanding) 
     panelContent.style.height = "0px"; 

    var stepHeight = contentHeight/PANEL_ANIMATION_STEPS; 
    var direction = (!expanding ? -1 : 1); 

    setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, 

    PANEL_ANIMATION_DELAY); 
    } 

    /** 
    * Change the height of the target 
    * @param panelContent reference to the panel content to change height 
    * @param iteration current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS 
    * @param stepHeight height increment to be added/substracted in one step 
    * @param direction  1 for expanding, -1 for collapsing 
    */ 
    function animateStep(panelContent, iteration, stepHeight, direction) 
    { 
     if (iteration<PANEL_ANIMATION_STEPS) 
     { 
     panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) 

    * stepHeight) +"px"; 
     iteration++; 
     setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY); 
     } 
     else 
     { 
     // set class for the panel 
     panelContent.parentNode.className = (direction<0) ? PANEL_COLLAPSED_CLASS : 
     PANEL_NORMAL_CLASS; 
     // clear inline styles 
     panelContent.style.display = panelContent.style.height = ""; 
     } 
    } 


// Load-Save 

/** 
    * Reads the "panels" cookie if exists, expects data formatted as key:  value|key:value... puts in 

    panelsStatus object 
    */ 
    function loadSettings() 
    { 
    // prepare the object that will keep the panel statuses 
    panelsStatus = {}; 

    // find the cookie name 
    var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); 
    if (start == -1) return; 

    // starting point of the value 
    start += PANEL_COOKIE_NAME.length+1; 

    // find end point of the value 
    var end = document.cookie.indexOf(";", start); 
    if (end == -1) end = document.cookie.length; 

    // get the value, split into key:value pairs 
    var cookieValue = unescape(document.cookie.substring(start, end)); 
    var panelsData = cookieValue.split("|"); 

    // split each key:value pair and put in object 
    for (var i=0; i< panelsData.length; i++) 
    { 
     var pair = panelsData[i].split(":"); 
     panelsStatus[pair[0]] = pair[1]; 
    } 
    } 

    function expandAll() 
    { 
    for (var key in panelsStatus) 
     saveSettings(key, "true"); 

    setUpPanels(); 
    } 

function collapseAll() 
{ 
    for (var key in panelsStatus) 
     saveSettings(key, "false"); 

    setUpPanels(); 
} 

以下是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頁面，默認標題是「測試」。當我點擊「一個面板」，「另一個面板」，「初始合併」時，我希望標題顯示我點擊的名稱。

請指教。

Answer 1

這個問題用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的單個元素。