当前位置：首页 → 问答吧 → fadeIn 效果问题。

fadeIn 效果问题。

时间：2010-05-31

来源：互联网

在下面选项卡用了fadeIn 效果，把滚动条拖到最下面来。然后可点击选项卡之后会跳动上来。怎么解决。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tab选项卡效果</title> <style type="text/css"> body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> <script type="text/javascript" src="http://www.56mp.cn/upload/Tab/js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> </head> <body> <div class="container"> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1>jQuery+CSS实现Tab选项卡效果</h1> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> <li><a href="#tab3">Resources</a></li> <li><a href="#tab4">Contact</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>Gallery</h2> <p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p> <p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p> <p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p> </div> <div id="tab2" class="tab_content"> <h2>Submit</h2> <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p> <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p> <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p> </div> <div id="tab3" class="tab_content"> <h2>Resources</h2> <p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p> <p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p> </div> <div id="tab4" class="tab_content"> <h2>Contact</h2> <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p> <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p> <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 at63 于 2010-6-1 10:53 编辑 ]

作者: at63 发布时间: 2010-05-31

有人知道怎么解决么。

作者: at63 发布时间: 2010-06-01

这问题应该是因为你用了 hidden()，你把那些个#tab1,#tab2的全 hidden 了浏览器自然往上滚，具体改动代码懒得写了，你如果非要用fadeIn效果，那就在#tab1
这些个里面再套一层div，然后对#tab1定个高宽，这样hidden时候就不会滚上去，要是不用fadeIn那好说了

$(activeTab).show(); //Fade in the active content
$(".tab_content").not($(activeTab)).hide(); //Hide other tabs

作者: aolu11 发布时间: 2010-06-01

问题解决了。fadeIn会受高度而变化，定死高度就行了。

作者: at63 发布时间: 2010-06-01

fadeIn 效果问题。

热门阅读

热门下载