jquery tab 切换代码 滑动门

Posted 2023-04-16

html是这种写法：
<ul>
<li id="a2">滑门一</li>
<li id="a3">滑门二</li>
</ul>

<div class="c">
<div id="b1">默认内容区</div>
<div id="b2">内容块一</div>
<div id="b3">内容块二</div>
</div>

第一： 没有滑门一，<li id="a1"></li> ，没有这个；

第二：li 在 ul 内，div 不在 ul 内；

第三：最大的难题是，当鼠标不在 li 上 且不在相对应的 div 上时，div 为默认块内容区，就是如何进行判断鼠标即不在 li 上，也不在相对应的 div 上；

快下班了，题目给我留着，回家或者明天给你写。
有一点要注意的是，“当鼠标不在 li 上 且不在相对应的 div 上时”这里，如果内容与滑门有一定距离的话，鼠标离开滑门内容就到默认块了，也就不存在鼠标到对应的内容块上去了。所以，应该是“当一定时间内，鼠标不在 li 上 且不在相对应的 div 上时，div为默认区块内容”。

我理解的没错的话，就可以了，回头给你写

代码给你写好了，做了个插件，加上demo有点长，我先贴出来看行不行，不行我可以发给你。
把下面的拷到一个html文件里，直接在浏览器里看效果。插件的用法都在代码的注释里了。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script>
/***
* anthor: Mao wl
* switch control Plug-in
*
* based on Jquery
*
demo:
$('#switchWrap').switchControl(
slideSpeed: 300, //content cutover speed
controlTo: $('#contentWrape'), //be controlled wrap
contentDefaultNum: 0, //default content number, start from 0
checkRevertDefault_interval: 600 //the interval revert to default content while cursor not hover on switchWrap or contentWrape
);
*
**/
(function(a)a.fn.switchControl=function(c)var e=a.extend(,slideSpeed:300,controlTo:,contentDefaultNum:0,checkRevertDefault_interval:1500,c);var b=t:"";var f=function(h)var i=0;a.each(h.prevAll(),function()i+=a(this).width());a("#switchControlWrap").animate(left:-i,e.slideSpeed);var g=function(h,i)if(!h.hasClass("hover")&&!e.controlTo.hasClass("hover"))f(i);var d=function(h)var i=a("#switchControlWrap").children().eq(h);var j=0;a.each(i.prevAll(),function()j+=a(this).width());a("#switchControlWrap").animate(left:-j,e.slideSpeed);return a(this).each(function()var i=a(this);var h=0;var j=0;a.each(e.controlTo.children(),function()if(a(this).height()>j)j=a(this).height()h+=a(this).width());e.controlTo.children().wrapAll("<div id='switchControlWrap' style='position:absolute; width:"+h+"; height:"+j+"'></div>");var k=a("#switchControlWrap").children().eq(e.contentDefaultNum);a("#switchControlWrap").append(k);f(k);i.hover(function()a(this).addClass("hover"),function()a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function()g(i,k),e.checkRevertDefault_interval));e.controlTo.hover(function()a(this).addClass("hover"),function()a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function()g(i,k),e.checkRevertDefault_interval));a.each(i.children(),function()a(this).click(function()var l=a(this).index();d(l)));g(i,k)))(jQuery);
</script>

<style type="text/css">
#switchWrap
list-style:none;


.switch
width:90px;
height:20px;
background-color:#000;
color:#FFF;
text-align:center;
display:block;
float:left;
margin-left:5px;
cursor:pointer;


#contentWrape
width:500px;
height:360px;
margin:auto;
border:solid 1px #123123;
position:relative;
overflow:hidden;


#contentWrape div
width:500px;
height:360px;
float:left;

</style>

<ul id="switchWrap">
<li class="switch">滑门1</li>
<li class="switch">滑门2</li>
<li class="switch">滑门3</li>
<li class="switch">滑门4</li>
<li class="switch">滑门5</li>
<li class="switch">滑门6</li>
</ul>

<div id="contentWrape">
<div>默认内容区</div>
<div>内容块1</div>
<div>内容块2</div>
<div>内容块3</div>
<div>内容块4</div>
<div>内容块5</div>
<div>内容块6</div>
</div>

<script>
$('#switchWrap').switchControl(
slideSpeed: 300,
controlTo: $('#contentWrape'),
contentDefaultNum: 0,
checkRevertDefault_interval: 600
);
</script> 参考技术A 默认显示 默认区块，其它两个区域隐藏，当鼠标移到第几个切换项上，相对应的第几个的内容显示，其它的隐藏，当鼠标没有移到任何1个切换上时，恢复到默认状态

jquery-tab切换,切换时滑块跟随鼠标滑动

        tab切换在前端应用中还是比较广泛的，下面是我自己写tab切换时的方法，gif图中滑块滑动效果没那么流畅，小伙伴们将就着看吧。

下面先上html结构，样式具体写法就不展示出来了，只要注意slide滑块需要用定位方式来写，并且层级放在li文字下方。

<div id="tab-box">

<ul id="tab-head">

<span class="slide"></span>

<li class="act">javascript</li>

<li>jquery</li>

<li>HTML5</li>

<li>CSS3</li>

</ul>

<div id="tab-con">

<ul class="act">

<li>javascirpt学习第一课</li>

<li>javascirpt学习第二课</li>

<li>javascirpt学习第三课</li>

<li>javascirpt学习第四课</li>

<li>javascirpt学习第五课</li>

</ul>

<ul>

<li>jquery练习1</li>

<li>jquery练习2</li>

<li>jquery练习3</li>

</ul>

<ul>

<li>HTML5-demo1</li>

<li>HTML5-demo2</li>

</ul>

<ul>

<li>css3的使用1</li>

<li>css3的使用2</li>

<li>css3的使用3</li>

<li>css3的使用4</li>

<li>css3的使用5</li>

<li>css3的使用6</li>

<li>css3的使用7</li>

</ul>

</div>

</div>

然后就是脚本部分了：

<script type="text/javascript">

var Li = $('#tab-head li');

var slide = $('#tab-head span');

//初始打开页面时，滑块的宽度与第一个li标签的宽度相同，+20是因为li标签的padding值设为了20

var firstLi = Li.eq(0).width() + 20;

$('#tab-head .slide').width(firstLi);

//tab切换

Li.click(function() {

$(this).siblings().removeClass('act');

$(this).addClass('act');

//获取该li的索引值

var index = $(this).index();

$('#tab-con ul').eq(index).siblings().removeClass('act');

$('#tab-con ul').eq(index).addClass('act');

});

//鼠标移动时，滑块跟随鼠标移动

Li.mouseover(function() {

var left = $(this).position().left;

//li的宽度+20px的padding值

var width = $(this).width() + 20;

//停止正在做的动效（为了让滑块移动连贯，去掉后滑块每次会恢复原位再移动）

slide.stop();

//$(selector).animate({params},speed,callback);  callback是动画完成后所执行的函数名称

slide.animate({

'left': left,

'width': width

}, '350');

});

//鼠标移出时，滑块恢复到当前有类名act的位置

Li.mouseout(function() {

var left = $('#tab-head .act').position().left;

var width = $('#tab-head .act').width() + 20;

slide.stop();

slide.animate({

'left': left,

'width': width

}, '350');

});

</script>