选项卡切换

原创 2015年11月21日 14:16:01
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <!--基本选项卡start-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="framework.js" type="text/javascript"></script>
    <script src="basicTab.js" type="text/javascript"></script>
    <!--基本选项卡end-->
    <style>
    li{ list-style:none;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="basicTab">
        <div name="Tab1" style="width: 97%; height: 100px;">
            <ul>
                <li>
                    <div>
                        TabContent1</div>
                </li>
            </ul>
        </div>
        <div name="Tab2" style="width: 97%; height: 100px;">
            <ul>
                <li>
                    <div mode="list" fixedcellheight="true" usecheckbox="true">
                        TabContent2
                    </div>
                </li>
            </ul>
        </div>
        <div name="Tab3" style="width: 97%; height: 100px;">
            <ul>
                <li>
                    <div mode="list" fixedcellheight="true" usecheckbox="true">
                        TabContent3
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </form>
</body>

</html>


需要的样式:http://download.csdn.net/detail/xydyz/9288357

需要的JS:http://download.csdn.net/detail/xydyz/9288349

                  http://download.csdn.net/detail/xydyz/9288331

                  http://download.csdn.net/detail/xydyz/9288325

javascript实现选项卡切换效果

javascript实现选项卡切换效果
  • u014610047
  • u014610047
  • 2016年02月19日 14:00
  • 1326

Tab选项卡切换

Tab选项卡切换 基本代码 HTML代码: div id="notice" class="notice"> div id="notice-tit...
  • winfredzen
  • winfredzen
  • 2016年05月06日 11:40
  • 1902

jquery实现选项卡切换

jquery 利用 index() 查找下标实现选项卡切换
  • FutureLilian
  • FutureLilian
  • 2017年09月01日 22:35
  • 536

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一些新闻门户网站上的常见选项卡效果:文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环...
  • u012848631
  • u012848631
  • 2016年03月28日 10:20
  • 16868

选项卡切换图片

选项卡切换图片 *{margin:0;padding:0;} #tab{margin:20px auto;width:500px;height:auto;} ul{width:500...
  • lusizhifei
  • lusizhifei
  • 2017年02月20日 20:01
  • 191

js实现选项卡的切换

选项卡的切换 .on{ background:#399; color:#fff;} .box div{ width:300px; height:300px;...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年08月01日 10:57
  • 1269

Android中想实现多个选项卡的切换,该如何实现

Viewpager中嵌套GrideView想要实现点击viewpager标题栏上的选项卡,实现Viewpager的切换,并且,选项卡得数量是不确定的,这个如何实现...
  • huamian3322
  • huamian3322
  • 2017年01月08日 17:46
  • 275

可滚动选项卡-切换

横向可滚动选项卡,计算滚动距离,任意添加滚动内容,可滚动到最底部停止。更改height为width,可变成横向滚动选项卡...
  • second_boy
  • second_boy
  • 2016年03月18日 17:42
  • 513

【jquery】tabs选项卡切换效果(jquery版)

以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: ...
  • dyllove98
  • dyllove98
  • 2013年04月29日 13:32
  • 8960

简单是选项卡切换效果~

效果图:代码:
  • kakaxiD
  • kakaxiD
  • 2016年05月09日 14:17
  • 1230
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:选项卡切换
举报原因:
原因补充:

(最多只允许输入30个字)