html页面调用 能更改页面风格,如何将html页面的标题改为点击的文本面板

我在html页面中有可扩展的面板。每个面板有3或4个内容。 当用户使用每个面板时，我想使用标题更改为面板名称。如何将html页面的标题改为点击的文本面板

以下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

{

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

{

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

{

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代码。

Panels Demo

Test

One panel

Test1

Another panel

Content goes here

More content

More content

Initially Collapsed

This panel is collapsed by default (until user sets a preference)

Expand

Collapse

从HTML页面，默认标题是“测试”。当我点击“一个面板”，“另一个面板”，“初始合并”时，我希望标题显示我点击的名称。

请指教。