Question

单击其中一个标签时，无法将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>

Answer 1

这应该有用。

php.ini

更改了CSS

$(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();
//alert(this.hash);
if($(this).hasClass('selected')){//Prevent animation on "selected" 
return false;
}
$('div.tabs > div:visible').fadeOut();
tabContainers.filter(this.hash).fadeIn();
// 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;
});

});

Fiddle here

Answer 2

重写了jQuery，以便所有内容都chained并添加preventDefault()以替换return 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();
    });
});

PLUNKER

Answer 3

如果你想要fadeIn和fadeOut使用它：

$(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.fadeOut(500).filter(this.hash).fadeIn(1500);
        // remove class="selected" from all tabs
    $('div.tabs ul.tabNavigation a').removeClass('selected').filter(this).addClass('selected');
        // set class="selected" on the tab that was just clicked
        // stop following links
        return false;
    });
});

你会看到渐弱的div会暂时堆叠。要防止这种情况，请将它们设置为绝对位置：

div.tabs > div {
  position: absolute;
}

然后确定正确的位置确定父母的位置：

div.container {
  position: relative;
}

在选定的选项卡JQuery上显示文本fadeIn（）

3 个答案: