单击jQuery切换链接会将div内容向下移动直到滚动。我该如何解决?

时间:2014-10-22 23:11:29

标签: javascript jquery html css toggle

正如标题所说,我在页面顶部有一个链接,使用jquery切换将一个div切换为另一个div。每当我点击这个链接,因为添加浮动的div来显示页面右侧的图形,它会向下移动所有内容,直到我用鼠标滚动。我该如何解决?以下是相关代码:

这是CSS:

<style>
div#percents {
margin: 0;
top: 0;
}
div#nvalues {
margin: 0;
top: 0;
}
div#one {
top: 0;
float:left;
width:50%;
overflow:hidden;
}
div#two {
top: 0;
float:left;
width:50%;
overflow:hidden;
}
</style>

以下是代码:

echo '<div id="percents">';
echo '<div id="one">';
echo '<b><a onclick="toggleNvalues();" alt="Show N Values" style="text-decoration: underline;color: blue;">Click to Show Numbers</a></b><br /><br />';
$tw3 = new TableWriter('Retention_Retreat_Vw', 'VALUE', false, false);
$tw3->setColumns('COHORT_YEAR', array('COHORT_YEAR', array('2006', '2007', '2008','2009', '2010',   '2011', '2012')));
$tw3->setCategory('VAR_NAME');
$tw3->setPercents(array(1,2,3,4,5,6,7,'averages'));
$tw3->writeColumnTable('COHORT_YEAR', '(RET_1 / COHORT * 100)', array('COHORT_TYPE', 'First-Time Freshman'), false,  'averages', 'side', 'One-Year First-Time Freshmen Retention Rates', false, 'VAR_Name = "Overall" - DESC', 'VAR_NAME-ASC', false, 'VALUE-ASC');
echo '<p class="citation">Notes: EFC=Expected Family Contribution. The Region categories are mutually exclusive.</p>';
echo '<p class="citation">Includes both full-time and part-time first-time freshman.</p>';
echo '<p class="citation">N/A values represent data not yet available or because the cohort in question has no students.</p>';
echo '<p class="citation">Only students who persist in the same major they had at entry are counted as being retained in the All Declared Majors category.</p>';

echo '<p class="citation">Those who did not pass remediation are automatically dis-enrolled (CO Policy) and thus will not be retained.</p><br><br>';
echo '</div>';
echo '<div id="two">';
echo '<br><br><br><br><img src="./img/testimage.jpg" />';
echo '<br><br><br><br><img src="./img/testimage2.jpg" />';
echo '<br><br><br><br><img src="./img/testimage3.jpg" />';
echo '</div></div><br style="clear:both"/>';

echo '<div id="nvalues">';
echo '<div id="one">';
echo '<b><a onclick="toggleNvalues();" alt="Show N Values" style="text-decoration:     underline;color: blue;">Click to Show Percents</a></b><br /><br />';
$tw3 = new TableWriter('Retention_Retreat_Vw', 'VALUE', false, false);
$tw3->setColumns('COHORT_YEAR', array('COHORT_YEAR', array('2006', '2007', '2008','2009', '2010', '2011', '2012')));
$tw3->setCategory('VAR_NAME');
$tw3->writeColumnTable('COHORT_YEAR', '(RET_1)', array('COHORT_TYPE', 'First-Time Freshman'), false,  'averages', 'side', 'One-Year First-Time Freshmen Retention Rates', false, 'VAR_Name = "Overall" - DESC', 'VAR_NAME-ASC', false, 'VALUE-ASC');
echo '<p class="citation">Notes: EFC=Expected Family Contribution. The Region categories are mutually exclusive.</p>';
echo '<p class="citation">N/A values represent data not yet available or because the cohort in question has no students.</p>';
echo '<p class="citation">Only students who persist in the same major they had at entry are counted as being retained in the All Declared Majors category.</p>';
echo '<p class="citation">Note: Includes both full-time and part-time first-time freshman.</p>';
echo '<p class="citation">Those who did not pass remediation are automatically dis-enrolled (CO Policy) and thus will not be retained.</p><br><br>';
echo '</div>';
echo '<div id="two">';
echo '<br><br><br><br><img src="./img/testimage.jpg" />';
echo '<br><br><br><br><img src="./img/testimage2.jpg" />';
echo '<br><br><br><br><img src="./img/testimage3.jpg" />';
echo '</div></div><br style="clear:both"/>';

0 个答案:

没有答案