利用jquery写的一个TAB页切换效果

函数如下

[javascript] view plaincopy

  1. /**
  2. *切换效果
  3. */
  4. function switab(tab,con,tab_c_css,tab_n_css,no) {
  5. $(tab).each(function(i){
  6. if(i == no)
  7. {
  8. $(this).addClass(tab_c_css);
  9. }else
  10. {
  11. $(this).removeClass(tab_c_css);
  12. $(this).addClass(tab_n_css);
  13. }
  14. })
  15. if (con)
  16. {
  17. $(con).each(function(i){
  18. if(i == no)
  19. {
  20. $(this).show();
  21. }else
  22. {
  23. $(this).hide();
  24. }
  25. })
  26. }
  27. }

使用前提条件:

加载jquery类

页面上有一个系列的切换的头和主体,如

tab头:
<div id="switab">
<li class="on" >标题1</li>

<li >标题2</li>

<li >标题3</li>

内容:

<div class="content" >主内容1</div>

<div class="content" >主内容2</div>

<div class="content" >主内容3</div>

</div>

然后面页面的加载事件,或直接在上面的li上面添加上点击事件:

页面加载事件方法:
$(document).ready(function(){
    $("#switab li").each(function(i){
        $(this).click(function(){
            switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,i);        
        })
    })
})

如果直接在li添加点击事件就在上面的li写成如下:
<li class="on" onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,0)">标题1</li>

<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,1)">标题2</li>

<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,2)">标题3</li>

但为了代码分离,建义使用前面的方法

switab函数参数介绍:
1.要切换的标题的批配条件,不要用ID,因为jquery用ID的话,找到的是一个对像,而不是对像数组,可以用name/class 或是父的过渡到子的,就像我例子上的/
2.主体内容批配的条件
3.标题为点中时的样式
4.标题为非选中状态时的样式
5.当前第几个,从0开始
由于用了jquery就不需要为标题/内容定义特殊的ID了,只要jquery能定位到这些就可以了。代码灵活性提高了,同时JS与HTML代码实现了完全分离!
另外如果以后要增加标签项,JS不用动,直接加就可以了。只要标题和内容相批配就行了

时间: 2024-10-08 23:10:20

利用jquery写的一个TAB页切换效果的相关文章

用jQuery写的一个翻页,并封装为插件,

1 *{ 2 margin:0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 } 7 .page{ 8 width:500px; 9 margin:100px auto; 10 color: #ccc; 11 } 12 .page a{ 13 display: inline-block; 14 color: #428bca; 15 height: 25px; 16 line-height: 25px; 17 paddi

jquery实现tab页切换显示div

1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

jQuery带有定时器的tab栏切换

现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务器压力较大,而淘宝的是当鼠标放上去2秒左右,才切换,这样,防止不断的来回切换,这个效果我们需要带定时器来控制就好了. 小强老师今天就以淘宝的tab栏切换,利用jquery定时器来做这个效果. 首先先把html 结构书写如下: <div class="r-hd">        

使用Bootstrap tab页切换的使用

代码: <!DOCTYPE html><html lang="en"><head><base target="_self"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="pragma" content="n

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果

[Jquery]tab页面切换效果

思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个,中间每个内容都会相继显示出来.比较好的用户体验是,从某个标签迅速移到另一个标签,中间不想看的内容不显示出来.这就需要延迟切换效果(每次划每次加载信息,必将影响性能) 使用定时器:setTimeout(500毫秒),每次鼠标滑过的时候,先判断定时器存不存在,存在的话先清除定时器,然后开启定时器,执行

微信Tab页切换

参考开源项目PagerSlidingTabStrip 做了一些小修改,比如设置Tab页平均铺满效果.字体变色等 微调的代码请 源码 下载 关于我 private void addTab(final int position, View tab) { tab.setFocusable(true); tab.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { pager.setCurre

利用jQuery如何删除一个节点

利用jQuery如何删除一个节点:添加或者删除节点是常用的操作,本章节介绍一下如何删除一个节点,当然在jQuery中删除节点的函数不止一个,不过这里就介绍一下如何使用remove()函数实现此功能,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.soft

用jQuery写了一个模态框插件

用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert