当我单击其中一个选项卡时，无法将 Div 文本转为 fadeIn()。我有它，所以它显示，无法弄清楚如何使用 Click 事件在动画中工作，因为它已经应用了用于显示文本和标题的类。我不知道将 fadeIn() 方法放在哪里，以便添加动画。
这是 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>
最佳答案
重写了 jQuery，使一切都是 chained并添加preventDefault()替换返回 false
$(document).ready(function() {
// Store containers and tabs in variables.
var tabContainers = $('div.tabs > div');
var tabs = $('div.tabs ul.tabNavigation a');
// Hide all but the 1st container and assign .selected to 1st tab
tabContainers.hide().filter(':first').show();
tabs.filter(':first').addClass('selected');
// Add click Event to all tabs.
tabs.click(function(e) {
// Hide all containers and fadeIn the container designated by tab's anchor's hash
tabContainers.hide().filter(this.hash).fadeIn(600);;
// Remove .selected from all tabs and add .selected to the clicked tab
tabs.removeClass('selected').filter(this).addClass('selected');
// Stop the anchor from jumping to a location.
e.preventDefault();
});
});
关于javascript - 所选选项卡上的 Div 文本 fadeIn() JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36667759/