如何将html页面的标题更改为单击的文本面板

时间：2014-08-29 23:09:12

标签： jquery

我在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页面，默认标题为“Test”。当我点击“One Panel”，“Another Panel”，“Initially Collaped”时，我希望标题为我点击的名称。

请告知。

1 个答案:

答案 0 :(得分：0)

使用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的单个元素。

相关问题
最新问题