我刚毕业，没有太多编程经验。
我正在使用 jQuery 函数 slideToggle() 在显示两个 div 元素之一之间进行切换。两个 div 都显示数据行，我尝试使用分页，因为每个 div 上有超过 50 条记录。
到目前为止一切似乎都很好。刷新页面，第一个 div 可见，分页正常工作。
当我单击运行 jQuery 函数切换到另一个 div 的按钮时，问题就开始了。显示第二个 div(第一个 div 消失，这很好)。当我单击页码时，浏览器会将我重定向到第一个 div 并开始显示第一个 div 的结果。 我认为这是正常的，因为在页面刷新时浏览器运行默认值，但我不知道如何解决这种情况。我将不胜感激任何帮助。忘了说这是 ColdFusion。
到目前为止我所做的是:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="logic.js"></script>
</head>
<body style="background-color:#E8ECED">
<div id="header">
<h1>BHA Toyota</h1>
</div>
<div class="container">
<cfset pageSize=15/>
<cfset recordCount=100/>
<cfset intStart=1/>
<div style="min-height:40px">
<div id="title">Top 30 Live Outbound Calls</div>
<div id="switchDealershipsButton">
<span id="switchDealers" role="button" tabindex="0">Switch to Showcase Honda</span>
</div>
</div>
<div id="texasHonda" class="row">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="texasHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Texas Toyota'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<cftable query="texasHondaLiveOutbandCalls" htmlTable="true" colHeaders="true">
<cfcol width="30" header="Account Name" text="<em>#texasHondaLiveOutbandCalls.refname#</em>">
<cfcol width="23" header="Call ID" text="<em>#texasHondaLiveOutbandCalls.callid#</em>">
<cfcol width="20" header="Line ID" text="<em>#texasHondaLiveOutbandCalls.cf_frn_dnisid#</em>">
<cfcol width="30" header="Date/Time of Call" text="<em>#texasHondaLiveOutbandCalls.tz_datetime#</em>">
</cftable>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
<div id="showcaseHonda" class="row" style="display:none">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="showcaseHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Showcase Honda'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<div class="table">
<cfoutput query="showcaseHondaLiveOutbandCalls">
<div class="tableRow">
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.refname#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.callid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.cf_frn_dnisid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.tz_datetime#</div>
</div>
</cfoutput>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('#switchDealers').click(function()
{
var dealerOnScreen = $('#switchDealers').text();
if(dealerOnScreen === "Switch to Showcase Honda")
$('#texasHonda').slideToggle("slow", texasToyota);
else
$('#showcaseHonda').slideToggle("slow", showcaseHonda);
});
function texasToyota() {
$('#showcaseHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Texas Toyota");
}
function showcaseHonda() {
$('#texasHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Showcase Honda");
}
});
最佳答案
好的，我已经解决了这个问题。如果以后有人遇到这个问题，我会将答案发布在这里。
我添加了另一个名为“section”的变量，在其中为第二个 div 创建分页链接(出现问题的那个)。我检查变量部分是否已定义(这意味着第二个 div 的分页链接是单击)。如果已定义，浏览器将刷新，但我隐藏第一个 div 并显示第二个 div。
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10)#">
<cfset intStart = (1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#§ion=2">#intPage#</a>
</cfloop>
</cfoutput>
<cfif isDefined("section") and section EQ 2>
<script type="text/javascript">
$(document).ready(function () {
$('#showcaseHonda').show();
texasToyotaHide();
});
</script>
</cfif>
关于html - 如何在两个 div 元素上使用分页，一次只能看到一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42701818/