1
當單擊我的某個選項卡時，無法使Div文本顯示爲fadeIn（）。我有它，所以它顯示，無法弄清楚如何使用Click事件處理動畫，因爲它已經應用了顯示文本和標題的類。我不知道在哪裏放置fadeIn（）方法，以便我可以添加動畫。選定選項卡上的div文本fadeIn（）JQuery
繼承人的JQuery的：
$(document).ready(function(){
// grab all container panel DIVs
var tabContainers = $('div.tabs > div');
// hide them all, then show the first one
tabContainers.hide().filter(':first').show();
// set the first tab to class="selected"
$('div.tabs ul.tabNavigation a:first').addClass('selected');
// add onclick handlers to all tabs
$('div.tabs ul.tabNavigation a').click(function(){
// hide all tabContainers
tabContainers.hide();
// show only the tabContainer with the ID that matches the href for the A that was clicked
//alert(this.hash);
tabContainers.filter(this.hash).show().;
// remove class="selected" from all tabs
$('div.tabs ul.tabNavigation a').removeClass('selected');
// set class="selected" on the tab that was just clicked
$(this).addClass('selected');
// stop following links
return false;
});
的CSS：
body {
margin: 0;
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%;
background: #bbb;
}
div.container {
margin: auto;
width: 80%;
}
h1 {
text-shadow: 0 1px 0 #eee;
}
ul.tabNavigation {
list-style: none;
margin: 0 0 0 25px;
padding: 0;
}
ul.tabNavigation li {
display: inline;
margin: 0;
}
ul.tabNavigation li a {
padding: 10px 10px 0 10px;
background-color: #ddd;
color: #000;
text-decoration: none;
border: 1px solid #888;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
ul.tabNavigation li a:hover {
background-color: #eee;
}
ul.tabNavigation li a.selected {
background-color: #FFF;
color: #333;
border-bottom: 1px solid #FFF;
}
ul.tabNavigation li a:focus {
outline: 0;
}
div.tabs > div {
padding: 25px;
border: 1px solid #888;
background-color: #FFF;
border-radius: 5px;
}
div.tabs > div h2 {
margin-top: 0;
}
的HTML：
<body id="page">
<div class="container">
<h1>Tabs</h1>
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Details</a></li>
<li><a href="#second">Specifications</a></li>
<li><a href="#third">Accessories</a></li>
<li><a href="#fourth">Reviews</a></li>
</ul>
<div id="first">
<h2>Details</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu diam ac nulla malesuada cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu eros a orci convallis consequat et eget nibh. Fusce a mi in tortor vulputate euismod vitae non dolor. Integer blandit adipiscing felis a sagittis. Fusce a vestibulum magna. Sed tellus diam, mattis quis tempor in, eleifend ac nisi. Nam odio ipsum, tempus quis semper laoreet, sagittis sed dolor. Quisque laoreet tincidunt tincidunt. Suspendisse pharetra cursus vestibulum. Proin viverra urna nec lorem tempus non scelerisque augue ultricies. Nam a pharetra eros. Duis leo augue, elementum et lobortis id, euismod tincidunt sem.</p>
</div>
<div id="second">
<h2>Specifications</h2>
<p>Phasellus eleifend, eros non blandit rutrum, massa orci elementum diam, sit amet cursus nisl tortor ac nunc. Suspendisse et enim eget enim luctus fermentum. Sed aliquam lacus luctus ligula suscipit placerat. Cras rutrum pellentesque ullamcorper. Nunc rhoncus euismod est, non accumsan nisl convallis in. Suspendisse ac enim non nisl tempus faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam odio augue, blandit et volutpat id, varius eget orci. Morbi quis elit enim, at varius velit. Vestibulum fringilla ante vel odio suscipit eu facilisis massa porta. Maecenas accumsan libero vestibulum massa vehicula euismod. Maecenas lacinia sem at est pulvinar congue. Donec in est a elit vestibulum euismod. Donec in nisl nisl.</p>
</div>
<div id="third">
<h2>Accessories</h2>
<p>Fusce mattis semper neque, eget iaculis mi pellentesque nec. Donec ultrices ullamcorper lacus vel dignissim. Mauris mollis, tortor a tincidunt adipiscing, augue lorem rhoncus mi, vitae facilisis ligula mauris ac lacus. Praesent dignissim, est quis tincidunt elementum, mi arcu dapibus ligula, vitae feugiat felis sapien ac nisi. Aenean dignissim bibendum dolor in facilisis. Duis aliquet, dui ac tincidunt sodales, erat massa elementum velit, vel condimentum elit sapien sit amet enim. Suspendisse sed odio semper lorem eleifend mollis. Aenean laoreet ante nec mi porta in sodales est luctus. Pellentesque sed lacus vitae nisl blandit euismod. Proin rutrum tellus nec quam sodales et adipiscing tortor adipiscing. Phasellus lacus erat, tempor eu iaculis eget, faucibus vitae dolor. Aliquam fringilla imperdiet nisi, et tempor dolor tincidunt sit amet. Donec vitae neque id libero tincidunt rhoncus. Suspendisse at massa eget dui mollis vehicula.</p>
</div>
<div id="fourth">
<h2>Reviews</h2>
<p>Suspendisse luctus mollis aliquam. Suspendisse potenti. Quisque a urna nisi. Praesent nisl turpis, aliquet vitae consequat eget, vestibulum nec nisl. Morbi tristique convallis lorem, ut tincidunt lacus mattis nec. In erat erat, tempus sed lacinia ac, fermentum sollicitudin sapien. Nulla facilisi. Vestibulum nec risus tortor, at venenatis lorem. Suspendisse potenti. Morbi accumsan tellus ut nulla elementum rhoncus. Ut tempor adipiscing dapibus.</p>
</div>
</div><!-- end .tabs -->
</div><!-- end #container -->
<div class="waste"></div>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>
</footer>