jQuery菜单切换-创新互联
一、标签切换
专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业五通桥免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。- 标签1
- 标签2
- 标签3
内容1
内容2
内容3
ul,li{ margin: 0; padding: 0; list-style: none; } li{ float: left; background-color: #868686; color: #FFFFFF; padding: 5px; margin-right: 2px; border: 1px solid white; } .tabin{ background-color: #6e6e6e; border: 1px solid #6e6e6e; } .contentfirst{ clear: both; background-color: #6e6e6e; color: #FFFFFF; width: 300px; height: 100px; padding: 10px; display: none; } .content{ display: block; }
var timeoutid; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode = $(this); $(this).mouseover(function(){ timeoutid=setTimeout(function(){ $("div.content").removeClass("content"); $("#tabfirst li.tabin").removeClass("tabin"); $("div").eq(index).addClass("content"); liNode.addClass("tabin"); },300) }).mouseout(function(){ clearTimeout(timeoutid); }) }); });
二、标签切换数据加载
- 标签1
- 标签2
- 标签3
内容1
内容2
内容3
- 装载完整页面
- 装载部分页面
- 装载网络数据
ul,li{ margin: 0; padding: 0; list-style: none; } li{ float: left; background-color: #868686; color: #FFFFFF; padding: 5px; margin-right: 2px; border: 1px solid white; } .tabin{ background-color: #6e6e6e; border: 1px solid #6e6e6e; } .contentfirst{ clear: both; background-color: #6e6e6e; color: #FFFFFF; width: 300px; height: 100px; padding: 10px; display: none; } .content{ display: block; } #tabsecond li{ float: left; background-color: #FFFFFF; color: blue; padding: 10px; margin-right: 2px; cursor: pointer; } #tabsecond li.tabin{ background-color: #f2f6f8; border: 1px solid #000000; border-bottom: 0; z-index: 100; position: relative; } #contentsecond{ width: 500px; height: 200px; padding: 10px; background-color: #F2F6F8; clear: left; border: 1px solid #000000; top: -2px; position: relative; }
var timeoutid; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode = $(this); $(this).mouseover(function(){ timeoutid=setTimeout(function(){ $("div.content").removeClass("content"); $("#tabfirst li.tabin").removeClass("tabin"); $("div").eq(index).addClass("content"); liNode.addClass("tabin"); },300) }).mouseout(function(){ clearTimeout(timeoutid); }) }); $("#realcontent").load("mytab.html"); $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if(index==0){ $("#realcontent").load("mytab.html"); }else if(index == 1){ $("#realcontent").load("mytab.html"); }else if(index == 2){ $("#realcontent").load("mytab.html"); } }) }) });
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here 你好么???<% out.print("你好,这里是jsp"); %>
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:jQuery菜单切换-创新互联
分享网址:http://azwzsj.com/article/dipcdc.html