Javascript的小问题-每次都会淡出，而不仅仅是页面加载

Tiny Javascript issue - FadeIn every time, not just on Pageload

本文关键字：淡出 不仅仅是 加载 问题 Javascript      更新时间：2023-09-26

我有以下代码:

目前它显示2个选项卡，其中显示2个独立的数据位，您可以在其中切换。

然而，当每个选项卡被"点击"时，我希望每个列表都像它最初在PageLoad上一样淡出。

这是可能的，我如何实现这一点?

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Simple List FadeIn</title>
<style>
  ul#thisisthelist1 li, ul#thisisthelist2 li{
    display:none;
  }
</style>

<script type="text/javascript">
/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
(function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
if(typeof s['return']=="function")
s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
return s;}
$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();
</script>

</head>
<body>

<div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
  </ul>

  <div id="tab1">
      <ul id="thisisthelist1">
       <li>1</li>
       <li>2</li>
       <li>3</li>  
      </ul>  
  </div>

  <div id="tab2">  
      <ul id="thisisthelist2">
       <li>4</li>
       <li>5</li>
       <li>6</li>  
      </ul>  
  </div> 
</div> 

<script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 
</script>

<script>
$(document).ready(function () {

    $("ul#thisisthelist1 li").each(function(i){
      $(this).delay(i*400).fadeIn('slow');
    });

    $("ul#thisisthelist2 li").each(function(i){
      $(this).delay(i*400).fadeIn('slow');
    });    

});

</script>

</body>

</html>

<script type="text/javascript">
    $('.tab').click(function(event) {
        var element = $(this);
        element
            .siblings('.tab')
            .find('ul > li')
            .fadeOut();
        element
            .find('ul > li')
            .fadeIn();
    });
</script>
<body>
    <div id="tab1" class="tab">
      <ul id="thisisthelist1">
       <li>1</li>
       <li>2</li>
       <li>3</li>
      </ul>
  </div>
  <div id="tab2" class="tab">
      <ul id="thisisthelist2">
       <li>4</li>
       <li>5</li>
       <li>6</li>
      </ul>
  </div>
</body>
相关文章：