文档章节

Jquery选项卡切换

yafasdfa
 yafasdfa
发布于 2014/12/16 10:45
字数 181
阅读 17
收藏 0
function resetTabs(){
    $("#content > div").hide(); 
    $("#tabs a").attr("id","");     
}
var myUrl = window.location.href; 
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));     
var myUrlTabName = myUrlTab.substring(0,4);

(function(){
    $("#content > div").hide(); 
    $("#tabs li:first a").attr("id","current"); 
    $("#content > div:first").fadeIn();
    
    $("#tabs a").on("click",function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){ 
         return       
        }
        else{             
        resetTabs();
        $(this).attr("id","current"); 
        $($(this).attr('name')).fadeIn(); 
        }
    });
    for (var i = 0; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          $("a[name='"+myUrlTab+"']").attr("id","current");
          $(myUrlTab).fadeIn();       
      }
    };
})();

html

<div class="contents">
<div class="content_head" style="display:none;">
    <ul id="tabs">
     <c:forEach items="${sources}" var="tab">
      <li><a href="#" name="#tab${tab.ordinal}"
       class="btn li_a_btn" onclick="return false">${tab.desp}</a></li>
     </c:forEach>
    </ul>
    <div id="content">
     <c:forEach items="${sources}" var="tab">
      <div id="tab${tab.ordinal}">
       <input class="tab_in" type="text" placeholder="${tab.desp}"
        onkeypress="keyPress(event,'search_${tab.ordinal}')"
        id="id_${tab.ordinal}" /> <a class="btn btn_search "
        href="classifyQuery.jsp?sort=${tab.ordinal+1}"
        id="search_${tab.ordinal}"
        onclick="return changeUrl('id_${tab.ordinal}','search_${tab.ordinal}','${tab.ordinal+1}');">搜索</a>
      </div>
     </c:forEach>
    </div>
   </div> 
   </div>

© 著作权归作者所有

yafasdfa
粉丝 1
博文 26
码字总数 10332
作品 0
苏州
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
808
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
layer 2.2 发布,jQuery Plugin 时代最后的余晖

近几年来,前端技术的发展日新月异。一个又一个解决方案登上历史的舞台,迅速变得炙手可热,又霎时冷落冰窖。在后jQuery时代,我们经历了以RequreJS、SeaJS为代表的前端模块化、又经历了以A...

贤心
2016/03/18
5.3K
31
[笔记]jQuery UI的tabs组件在IE浏览器中的缓存问题~

jQuery中禁用缓存 最近在使用jQuery ui中的tabs插件时,遇到一个问题。 在非IE浏览器下,标签是自动刷新的。就是在不同的标签间切换,不用刷新整个页面,如果某个标签内容有更新,比如显示时...

leeoo
2011/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

苹果面向Mac发布英特尔处理器漏洞缓解措施

去年苹果向Safari浏览器推出安全更新以修复基于ARM价格和英特尔的处理器存在的推测执行系列安全漏洞。 不过当时苹果并未发布有关处理器性能下降的测试结果,但大家都知道安装缓解措施会造成处...

linux-tao
52分钟前
1
0
第一个vue应用

https://www.bootcdn.cn/vue/ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ color: red; ......

江戸川
今天
4
0
NCRE考试感想 四级嵌入式(下)

权威的官方文件 考试时间:2017年3月 经验写于:2017年5月 万事万物都在变化,四级嵌入式也是如此。所以,该经验仅作为参考,官方的文件才是权威。   做题经验 第一遍做题库时,拿眼睛看,看...

志成就
今天
2
0
共享Session

分布式系统中,Session 共享有很多的解决方案,其中托管到缓存中应该是最常用的方案之一。 spring官方说明: Spring Session 提供了一套创建和管理 Servlet HttpSession 的方案。Spring Sess...

贾峰uk
今天
2
0
秒杀

少年已不再年少
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部