简单的一个jquery实现网页tab功能

最新推荐文章于 2023-04-11 08:46:50 发布
最新推荐文章于 2023-04-11 08:46:50 发布
阅读量775 收藏
点赞数 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    
    <style type="text/css">
        .tabs
        {
            list-style: none;
            padding: 0;
            margin: 0px;
            border-bottom: 1px solid silver;
            width: 619px;
            border-top:0px solid silver;
        }
        .tabs li
        {
            float: left;
            background: #e0e0e0;
            border: 1px solid silver;
            border-left: none;
            margin: 0px;
        }
        ul.tabs li a
        {
            text-decoration: none;
            padding: 0 20px;
        }
        a
        {
            display: block;
            color:Black;
        }
        .active
        {
            background-color: White;
            border-bottom: 1px solid #fff;
        }
        .tab_container
        {
            border-left: 1px solid gray;
            border-right: 1px solid gray;
            border-bottom: 1px solid gray;
            border-top: 1px solid gray;
            height: 500px;
            float: left;
            clear: both;
            width: 841px;
        }
        a:hover
        {
            background-color: White;
            color:Red;
        }
        a:visited
        {
            color: Black;
        }
    </style>

    <script src="Js/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="Js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $(".tab_content").hide();
            $("ul.tabs li").eq(0).addClass("active");
            $(".tab_content").eq(0).show();

            $(".tabs li").click(function() {
                $(".tabs li").removeClass("active");
                $(".tab_content").hide();
                $(this).addClass("active");


                var activeTab = $(this).find("a").attr("href");
                $(activeTab).fadeIn("slow");

            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul class="tabs">
            <li><a href="#tab1">Menu1</a></li>
            <li><a href="#tab2">Menu2</a></li>
            <li><a href="#tab3">Menu3</a></li>
            <li><a href="#tab4">Menu4</a></li>
            <li><a href="#tab5">Menu5</a></li>
            <li><a href="#tab6">Menu6</a></li>
            <li><a href="#tab7">Menu7</a></li>
        </ul>
        <div class="tab_container">
            <div id="tab1" class="tab_content">
               <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab2" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab3" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab4" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab5" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab6" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
            <div id="tab7" class="tab_content">
                <iframe src="" id="Iframe1" name="I1"> </iframe>      
            </div>
        </div>
    </div>
    </form>
</body>
</html>


黄爷爷的附加说明：实现后标签页面有缓慢显示特效，但是缺点是iframe要强制焦点显示，也就是会移动滚动条。


辣酱油
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 实现tab切换效果
04-19
NULL 博文链接：https://lxzqz.iteye.com/blog/1876715
手把手教你用Jquery实现简单tab
源码好优多
01-17 1073
Jquery实现一个简单的tab $(function() { /*隐藏所有tab div 内容*/ $(".tabcont").hide(); /*给第一个li标签add就是添加 ，添加名字为yansi类样式*/ $("li:first").addClass("yansi"); /*给第一个显示第一个tab*/ $(".tabcont:first").show();
jQuery实现tab功能
weixin_34216107的博客
05-30 68
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> </head> <body> <script type="text/javascript" ...
基于Jquery的tab实现
笔记库
09-19 155
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content...
用jquery实现Tab选项卡
weixin_52996643的博客
05-25 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
jQuery制作tab选项卡
weixin_44886806的博客
05-18 1728
用jQuery来制作tab的选项卡。 说白了就是切换到别的选项，已简单的例子来说，先写出样式. CSS部分: <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav { width: 80%; line-height: 48px; background: #f6f8fa; overflow: hidden;
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
超实用的jQuery代码段
03-04
第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维...
jquery 动态示例
06-09
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
jQuery----jquery实现Tab键切换
01-17 1475
使用Jquery实现tab键切换，代码简洁易懂，实现逻辑清晰明了。具体总结如下： 需求分析： 鼠标进入tab切换模块，鼠标当前的模块上边框变为红色，并显示对应的商品名称。鼠标离开后，上边框恢复原色，图片改变。 实现效果如下： 页面1： 页面2 页面3 页面4 页面结构分析： 1.使用大盒子wrapper控制整个内容在页面的位...
jQuery实现tab的切换
廖圣平
05-26 2320
html： ul class="tab"> li>最新li> li class="cur">热门li> li>新闻li> ul> div>11div> div class="on">22div> div>33div> css： div{margin:0;padding:0;width:184px;height:200px;
Jquery实现Tab效果
阳春白雪，技术人生
01-26 574
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br />    <title></title><br /><br />    <script src="Public/jquery.
jquery
lysunki的博客
06-13 194
[code="js"]$(document).ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); });[/code] http://www.freejs.net/article_tabb...
JQuery实现tab页
weixin_34248118的博客
03-20 220
用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab页</title> 6 <style> 7...
jQuery UI 实例 - 标签页（Tabs）
unber的博客
04-11 1228
一种多面板的单内容区，每个面板与列表中的标题相关。如需了解更多有关 tabs 部件的细节，请查看 API 文档。
jquery实现tab栏
延宾的博客
05-10 342
Document       div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;} .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;} .tab li{float:left;wi
编写一个使用jQuery实现的网页交互特效
最新发布
05-19
以下是一个使用jQuery实现的简单的网页交互特效示例： HTML代码： ``` 点击我 ;">这是隐藏的内容 ``` jQuery代码： ``` $(document).ready(function(){ $("#btn").click(function(){ $("#box").fadeIn(1000); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值