我是呼叫中心的脚本程序员。我为代理商创建了与客户交谈时使用的网页。我已经在这个项目上工作了大约一个半星期，但现在我处于停滞状态。我无法弄清楚如何创建只会从所选选项卡部分生成信息的选项卡。我会尝试尽可能详细！
这是我的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和关键字搜索。现在我遇到的问题是页面顶部的标签。这就是我想要发生的事情，当代理单击我想要的选项卡时，我只需要显示我选择的部分，以便代理能够更快更有效地加密信息页面。可以这样做吗？如果是这样的话？