需要帮助xslt中的Tab按钮

Question

我是呼叫中心的脚本程序员。我为代理商创建了与客户交谈时使用的网页。我已经在这个项目上工作了大约一个半星期，但现在我处于停滞状态。我无法弄清楚如何创建只会从所选选项卡部分生成信息的选项卡。我会尝试尽可能详细！

这是我的Xsl：

<xsl:template match="/">
    <link href="/USA800/Stylesheets/usa800.css" type="text/css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script type="text/javascript" src="/usa800/ClientSideScripts/jquery-1.7.2.min.js"/>
    <script language="javascript"><![CDATA[/* Plugin:  highlight v4 Descr:  Highlights arbitrary terms.  
Source:  <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html> License: MIT license.  Author:  Johann Burkard Website: <http://johannburkard.de> Email:   <mailto:jb@eaio.com> */

`jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {


var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes &&      
!/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};

jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
 with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};



$(document).ready(function(){
var globalTable = $("#KBase").html();

$("#search").keyup(function() {
    var value = this.value.toLowerCase();       

    if(value.length > 3) {          
        $("#KBase").removeHighlight();
        $("#KBase").highlight(value);
        $("#KBase").find("tr").each(function(index) {
            if (index === 0) return;
            var id = $(this).find("td").text().toLowerCase();                   
            $(this).toggle(id.indexOf(value) !== -1);
        });
    }
    else if (value.length == 0) {
        $("#KBase").html(globalTable);
    }   
});
 });

]]>
    </script>

    <style>.highlight
{
background-color:blue;
}</style>


    <center>
        <img src="http://25.media.tumblr.com/tumblr_m5krqjdKum1r0z3y7o1_500.gif" alt="Learn you must!" style="width:208px;height:145px"/>
        <br/>

        <script>function scrollWin(x, y) {
                window.scrollTo(x, y); }</script>

        <h3>
            <b>Click Tab to Search Location</b>
        </h3>

        <button onclick="scrollWin(0,11535)">
            <i>
                <b>ATV</b>
            </i>
        </button>

        <button onclick="scrollWin(0,420)">
            <i>
                <b>About Polaris</b>
            </i>
        </button>
        <button onclick="scrollWin(0,79999)">
            <i>
                <b>Slingshot</b>
            </i>
        </button>

        <button onclick="scrollWin(0,83550)">
            <i>
                <b>Snowmobile</b>
            </i>
        </button>
        <br/>
        <button onclick="scrollWin(0,90092)">
            <i>
                <b>Victory</b>
            </i>
        </button>
        <button onclick="scrollWin(0,49550)">
            <i>
                <b>Indian Motorcycle</b>
            </i>
        </button>
        <button onclick="scrollWin(0,64890)">
            <i>
                <b>Mailing List</b>
            </i>
        </button>
        <button onclick="scrollWin(0,75800)">
            <i>
                <b>RZR</b>
            </i>
        </button>
        <br/>
        <button onclick="scrollWin(0,37112)">
            <i>
                <b>BRUTUS</b>
            </i>
        </button>
        <button onclick="scrollWin(0,74700)">
            <i>
                <b>Ranger</b>
            </i>
        </button>

        <button onclick="scrollWin(0,65409)">
            <i>
                <b>Military</b>
            </i>
        </button>
        <button onclick="scrollWin(0,39990)">
            <i>
                <b>Electric Vehicles</b>
            </i>
        </button>
        <br/>
        <button onclick="scrollWin(0,69465)">
            <i>
                <b>Polaris ESC</b>
            </i>
        </button>
        <button onclick="scrollWin(0,38125)">
            <i>
                <b>Documents</b>
            </i>
        </button>
    </center>




    <b>
        <xsl:text disable-output-escaping="yes">Keyword's Search  </xsl:text>
        <input type="text" id="search" placeholder="Search..."/>
    </b>
    <br/>
    <br/>


    <table id="KBase" width="100%" border="11.5" frame="border" style="color:#CC3300" bgcolor="#B6FFE7">
        <tr bgcolor="#E8F7FF" style="color:#606060">
            <th>
                <b>Case Type 1</b>
            </th>
            <th>
                <b>Case Type 2</b>
            </th>
            <th>
                <b>Title</b>
            </th>
            <th>
                <b>Body</b>
            </th>
            <th>
                <b>Script</b>
            </th>
            <th>
                <b>Created</b>
            </th>
            <th>
                <b>Last Modified</b>
            </th>
        </tr>


        <xsl:apply-templates select="document/article">
            <xsl:sort select="casetype1" order="ascending"/>
            <xsl:sort order="descending" select="title"/>
        </xsl:apply-templates>
    </table>

    <button onclick="scrollWin(0,0)">
        <i>
            <b>Back To Top</b>
        </i>
    </button>
</xsl:template>

好的，现在这是我的XML的较小版本：

<document>
<article id="1">
    <title>International Inquiries</title>
    <body>Thank you for contacting Polaris Industries!</body>
    <script>May i please have your phone number area code first.</script>
    <casetype1>ATV</casetype1>
    <casetype2>Dealer</casetype2>
    <created sort="201206011355">06/01/2012 13:55</created>
    <modified sort="201411191848">11/19/2014 18:48</modified>
</article>
<article id="2">
    <title>National Accounts – Fleet Sales</title>
    <body>Polaris has a National Accounts/Fleet Sales group that sells Polaris vehicles direct to businesses.</body>
    <script></script>
    <casetype1>ATV</casetype1>
    <casetype2>Product</casetype2>
    <created sort="201402171253">02/17/2014 12:53</created>
    <modified sort="201411191838">11/19/2014 18:38</modified>
</article>
<article id="3">
    <title>Motorcycle Consumer Session Focus Group</title>
    <body>We have been recruiting for 10-15 Victory and Indian customers in 3 markets to take place in a 2.5 hour meeting (with a 30 min check in time) regarding their customer experience with Victory and Indian.</body>
    <script></script>
    <casetype1>Indian Motorcycle</casetype1>
    <casetype2>Marketing</casetype2>
    <created sort="201411111021">11/11/2014 10:21</created>
    <modified sort="201411181845">11/18/2014 18:45</modified>
</article>
<article id="4">
    <title>2015 SNOWCHECK Select Golden Ticket</title>
    <body>Golden Ticket (RMK models only)</body>
    <script></script>
    <casetype1>Snowmobile</casetype1>
    <casetype2>Marketing</casetype2>
    <created sort="201403211233">03/21/2014 12:33</created>
    <modified sort="201411181521">11/18/2014 15:21</modified>
</article></document>

好的，我按“casetype1”升序和“降序”排序表。然后我添加了颜色，GIF和关键字搜索。现在我遇到的问题是页面顶部的标签。这就是我想要发生的事情，当代理单击我想要的选项卡时，我只需要显示我选择的部分，以便代理能够更快更有效地加密信息页面。可以这样做吗？如果是这样的话？