我正在开发一个我在工作中继承的网站,该网站使用进度条/标签显示捐赠进度。大多数名单的年份为 9 年(例如 1990-1999 年),但最后一份名单有 13 年(2000-2012 年)。因此,我有一个 javascript 函数showHiddenBars()
它显示/隐藏相应的元素。
第一次加载时,所有内容都会正确显示(默认显示 2000-2012 年),但隐藏它们然后显示它们后,它会弄乱布局。据我所知,通过 Google Chrome 的检查器,当.show()
函数被使用它正在添加style="display: inline-block"
到我的包含标签的 span 元素。我正在使用clip
jQuery UI 的缓动效果,具有显示和隐藏功能。
如何防止 .show 添加 style="display: inline-block;"
完整的 JavaScript:http://pastebin.com/ZmbQqwWF http://pastebin.com/ZmbQqwWF
完整的 HTML:http://pastebin.com/mf6W1ahF http://pastebin.com/mf6W1ahF
示例站点:http://kirsches.us/3000Strong/decadeProgress.html http://kirsches.us/3000Strong/decadeProgress.html
JavaScript:
function showHiddenBars() {
"use strict";
//show the bars we aren't using.
$('#decade10').show("clip");
$('#decade11').show("clip");
$('#decade12').show("clip");
$('#decade13').show("clip");
$('#decade10label').show("clip");
$('#decade11label').show("clip");
$('#decade12label').show("clip");
$('#decade13label').show("clip");
$('#decade10AmountGiven').show("clip");
$('#decade11AmountGiven').show("clip");
$('#decade12AmountGiven').show("clip");
$('#decade13AmountGiven').show("clip");
}
function hideHiddenBars() {
"use strict";
//hide the bars we aren't using.
$('#decade10').hide("clip");
$('#decade11').hide("clip");
$('#decade12').hide("clip");
$('#decade13').hide("clip");
$('#decade10label').hide("clip");
$('#decade11label').hide("clip");
$('#decade12label').hide("clip");
$('#decade13label').hide("clip");
$('#decade10AmountGiven').hide("clip");
$('#decade11AmountGiven').hide("clip");
$('#decade12AmountGiven').hide("clip");
$('#decade13AmountGiven').hide("clip");
}
HTML:
<div id="decadeProgressContainer">
<span class="titleFontNoBorder" id="decade1label">2000</span>
<div id="decade1" class="progressBarSpacingTop"></div>
<span id="decade1AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade2label">2001</span>
<div id="decade2" class="progressBarSpacing"></div>
<span id="decade2AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade3label">2002</span>
<div id="decade3" class="progressBarSpacing"></div>
<span id="decade3AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade4label">2003</span>
<div id="decade4" class="progressBarSpacing"></div>
<span id="decade4AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade5label">2004</span>
<div id="decade5" class="progressBarSpacing"></div>
<span id="decade5AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade6label">2005</span>
<div id="decade6" class="progressBarSpacing"></div>
<span id="decade6AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade7label">2006</span>
<div id="decade7" class="progressBarSpacing"></div>
<span id="decade7AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade8label">2007</span>
<div id="decade8" class="progressBarSpacing"></div>
<span id="decade8AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade9label">2008</span>
<div id="decade9" class="progressBarSpacing"></div>
<span id="decade9AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade10label">2009</span>
<div id="decade10" class="progressBarSpacing"></div>
<span id="decade10AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade11label">2010</span>
<div id="decade11" class="progressBarSpacing"></div>
<span id="decade11AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade12label">2011</span>
<div id="decade12" class="progressBarSpacing"></div>
<span id="decade12AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade13label">2012</span>
<div id="decade13" class="progressBarSpacing"></div>
<span id="decade13AmountGiven">$130,000</span>
</div>
<!--end div #decadeProgressContainer-->