Javascript 如何在jsp页面中隐藏选项卡的内容_Javascript_Jsp

Javascript 如何在jsp页面中隐藏选项卡的内容

javascript jsp

Javascript 如何在jsp页面中隐藏选项卡的内容,javascript,jsp,Javascript,Jsp,我有一个带有4个选项卡的jsp页面。假设tab1，tab2，tab3，tab4。每个选项卡都有自己的按钮，按钮1用于选项卡1，同样按钮2用于选项卡2，按钮3用于选项卡3，按钮4用于选项卡4。当我单击tab1时，它应该只显示tab1的内容，其余选项卡的其他按钮不应显示。我的问题是，当我单击tab1时，它显示tab1 ie button1的按钮，这是正确的，但当我单击button1以获得所需的输出时，网页显示其余选项卡的按钮ie button2，按钮3、按钮4以及不正确的表格内容。下面是我使用的小代

我有一个带有4个选项卡的jsp页面。假设tab1，tab2，tab3，tab4。每个选项卡都有自己的按钮，按钮1用于选项卡1，同样按钮2用于选项卡2，按钮3用于选项卡3，按钮4用于选项卡4。当我单击tab1时，它应该只显示tab1的内容，其余选项卡的其他按钮不应显示。我的问题是，当我单击tab1时，它显示tab1 ie button1的按钮，这是正确的，但当我单击button1以获得所需的输出时，网页显示其余选项卡的按钮ie button2，按钮3、按钮4以及不正确的表格内容。下面是我使用的小代码段

<script type="text/javascript">
function tab(tab) {
    document.getElementById("start").style.display = "none";
    document.getElementById("status").style.display = "none";
    document.getElementById("log").style.display = "none";
    document.getElementById("checkin/checkout").style.display = "none";
    document.getElementById("version").style.display = "none";
    document.getElementById("li_start").setAttribute("class", "");
    document.getElementById("li_status").setAttribute("class", "");
    document.getElementById("li_log").setAttribute("class", "");
    document.getElementById("li_checkin/checkout").setAttribute("class", "");
    document.getElementById("li_version").setAttribute("class", "");
    document.getElementById(tab).style.display = "block";
    document.getElementById("li_"+tab).setAttribute("class", "active");
    }
    </script>

    <div id="tabs" align="center">
    <ul>
        <li id="li_start" onclick="tab  
('start')"><a>Start/Stop/Reread</a></li>
        <li id="li_status" onclick="tab('status')"><a>Server 
   Status</a></li>
        <li id="li_log" onclick="tab('log')"><a>View Log</a></li>
        <li id="li_version" onclick="tab('version')"><a>Version</a></li>
        <li id="li_checkin/checkout" onclick="tab
('checkin/checkout')"><a>Checkin/Checkout Feature</a></li>
    </ul>

    <div id="Content_Area"></div>
</div>

<div id="log" onclick="document.getElementById('log').style.display = 'block';">

<table align="center"><tr><td><h2>LogFile</h2></td></tr></table>

<table width="500px" align="center" style="border:1px solid #000000;background-  
color:#efefef;">

<tr><td colspan=2></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr>
    <td><b>LogFile</b></td>

    <td>
                            <FORM 
action="logfile" METHOD="POST">
                                <input 
type=submit name=showLog id=txtSubmit value="ViewLog" />

                            </FORM>

                        <div id="result">
                            <pre>
    ${requestScope.logOutput}
</pre>
                        </div></td>

</tr>


<tr><td colspan=2>&nbsp;</td></tr>

</table>


功能选项卡（选项卡）{
document.getElementById（“开始”）.style.display=“无”；
document.getElementById（“状态”）.style.display=“无”；
document.getElementById（“log”）.style.display=“无”；
document.getElementById（“签入/签出”）.style.display=“无”；
document.getElementById（“版本”）.style.display=“无”；
document.getElementById（“li_start”）.setAttribute（“类”，“类”）；
document.getElementById（“li_状态”）.setAttribute（“类”，“类”）；
document.getElementById（“li_log”）.setAttribute（“类”，“类”）；
document.getElementById（“li_签入/签出”）.setAttribute（“类”，“类”）；
document.getElementById（“li_版本”）.setAttribute（“类”，“类”）；
document.getElementById（tab.style.display=“block”；
document.getElementById（“li_”+tab）.setAttribute（“class”，“active”）；
}






服务器启动
JavaScript选项卡将网页内容划分为选项卡式部分。p>
代码的编写方式使页面在bro中优雅地降级
地位
如果您的网页包含大量内容，则JavaScript选项卡非常有用
它们也适用于多步骤Web表单
日志文件
单击选项卡以查看选项卡的内容。使用标签再简单不过了
版本


${requestScope.verOutput}

这实际上是一个纯粹的javascript问题。无论您使用哪种服务器端语言，或者即使您使用静态html，答案都是相同的。@developerwk：谢谢您的快速回复。所以没有其他方法来隐藏标签？我建议，或者这篇文章你到目前为止所拥有的在我看来不是“标签”，而是一个无序的列表。@developerwjk:但是我的是IE8，上面的文章不适用于IE8。第二篇文章没有使用getElementsByClassName。它在IE8中运行良好。

    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title>JavaScript tabs example</title>

<style type="text/css">
  body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
  ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
  ul#tabs li { display: inline; }
  ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid     
#c9c3ba;     border-bottom: none; padding: 0.3em; text-decoration: none; }
  ul#tabs li a:hover { background-color: #f1f0ee; }
  ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold;  
padding: 0.7em 0.3em 0.38em 0.3em; }
  div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: 
#f1f0ee; }
  div.tabContent.hide { display: none; }
</style>

<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

  // Grab the tab links and content divs from the page
  var tabListItems = document.getElementById('tabs').childNodes;
  for ( var i = 0; i < tabListItems.length; i++ ) {
    if ( tabListItems[i].nodeName == "LI" ) {
      var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
      var id = getHash( tabLink.getAttribute('href') );
      tabLinks[id] = tabLink;
      contentDivs[id] = document.getElementById( id );
    }
  }

  // Assign onclick events to the tab links, and
  // highlight the first tab
  var i = 0;

  for ( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur() };
   // if ( i == 0 ) tabLinks[id].className = 'selected';
    i++;
  }

  // Hide all content divs except the first
  var i = 0;

  for ( var id in contentDivs ) {
    if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
    i++;
  }
}

function showTab() {
  var selectedId = getHash( this.getAttribute('href') );

  // Highlight the selected tab, and dim all others.
  // Also show the selected content div, and hide all others.
  for ( var id in contentDivs ) {
    if ( id == selectedId ) {
      tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }

  // Stop the browser following the link
  return false;
}

function getFirstChildWithTagName( element, tagName ) {
  for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
  }
}

function getHash( url ) {
  var hashPos = url.lastIndexOf ( '#' );
  return url.substring( hashPos + 1 );
}

//]]>
</script>
  </head>
  <body onload="init()">
<h1>JavaScript tabs example</h1>

<ul id="tabs">
  <li><a href="#start">Start/Stop/ReRead</a></li>
  <li><a href="#status">ServerStatus</a></li>
  <li><a href="#logs">ViewLog</a></li>
  <li><a href="#version">Version</a></li>

</ul>

<div class="tabContent" id="start">
  <h2>ServerStart</h2>
  <div>
    <p>JavaScript tabs partition your Web page content into tabbed sections.      p>
    <p>The code is written in such a way that the page degrades gracefully in bro.</p>
  </div>
</div>

<div class="tabContent" id="status">
  <h2>Status</h2>
  <div>
    <p>JavaScript tabs are great if your Web page contains a large amount of cont.</p>
    <p>They're also good for things like multi-step Web forms.</p>
  </div>
</div>

<div class="tabContent" id="logs">
  <h2>Logfile</h2>
  <div>
    <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
  </div>
</div>

<div class="tabContent" id="version">
  <h2>Version</h2>
  <div>
    <form action="version" method="post">
                                <p><input type=submit name=findversion id=txtSubmit
                                    value=FindVersion />

                        <div id="result">
                            <pre>
    ${requestScope.verOutput}
</pre>
                        </div>
  </div>
</div>