选项卡切换

最新推荐文章于 2022-05-31 14:05:17 发布
最新推荐文章于 2022-05-31 14:05:17 发布
阅读量200 收藏
点赞数
分类专栏： 常用小功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xydyz/article/details/49964549
版权
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>


<!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>
    <title></title>
    <script src="jquery-1.4.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(function()
{
   $("#tabBackground li").each(function() { 
     $(this).click(function() {
     var index=$(this).index("li");//得到选择的选项的Index
     $(this).siblings(".tabBackgroundActive").removeClass("tabBackgroundActive");//移除当前选择的样式
     $("li:eq("+index+")").addClass("tabBackgroundActive");                      //给当前选择的样式添加样式
     $(".divBackground.divContentActive").removeClass("divContentActive");       //将内容删除掉
     $(".divBackground:eq("+index+")").addClass("divContentActive")              //将选项卡对应的内容添加样式
     })
   })
}
)
    </script>


    <style type="text/css">
        #tab
        {
            width: 300px;
            margin: 0 auto;
        }
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            width: 50px;
            height: 25px;
            margin: 0 auto;
            text-align: center;
            padding-top: 5px;
            margin-right: 10px;
            background-color: #D3E0F2;
            color: #15428B;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border: 0px solid #15428B;
        }
        .tabBackgroundActive
        {
            background-color: #DEECFD;
            border: 1px solid red;
            color: red;
            border-bottom: 0px solid red;
        }
        .divBackground
        {
            clear: both;
            margin: 0 auto;
            background-color: #DEECFD;
            width: 220px;
            height: 200px;
            display: none;
            border-radius: 10px;
            text-align: center;
            padding-top: 10px;
            border: 1px solid red;
        }
        .divContentActive
        {
            display: block;
            position: absolute;
            z-index: -1;
            margin-top: 30px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul id="tabBackground">
            <li class="tabBackgroundActive">tab A</li>
            <li>tab B</li>
            <li>tab C</li>
        </ul>
        <div class="divBackground divContentActive">
            tab 1 content
        </div>
        <div class="divBackground">
            tab 2 content
        </div>
        <div class="divBackground">
            tab 3 conetent
        </div>
    </div>
</body>
</html>
xydyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tab选项卡切换
了凡
05-06 5813
Tab选项卡切换 基本代码 HTML代码： div id="notice" class="notice"> div id="notice-tit" class="notice-tit"> ul> li>a href="#">公告a>li> li>a hre
Paging基础知识
yimenren的博客
03-21 1831
https://wenku.baidu.com/view/41728c165f0e7cd184253660.html
uniapp选项卡切换
weixin_53935634的博客
05-31 1334
<view class="all"> <!-- 头部选项卡 --> <view class="head-nav"> <view :class="navIndex==0?'activite':''" @click="checkIndex(0)">未支付</view> <view :class="navInde...
CSS实现选项卡切换
This is HuangWenJun' CSDN.
07-22 1954
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>&...
TabSwitch选项卡切换
11-22
在IT领域，选项卡切换（TabSwitch）是一种常见的用户界面设计模式，广泛应用于各种软件、浏览器和应用程序中。它提供了一种高效的方式来组织和切换不同的视图或工作区，允许用户在同一窗口内处理多个任务，而无需...
选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡_
09-30
标题“选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡”表明我们要讨论的是LabVIEW中的选项卡切换技术，这通常涉及到如何在LabVIEW程序中实现不同界面或工作空间之间的平滑过渡。 描述中提到...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
bootstrap实现tab选项卡切换
10-14
在本案例中，我们将详细讨论如何使用Bootstrap来实现选项卡切换的功能。 首先，Bootstrap的选项卡（Tab）组件是通过`<ul>`和`<li>`元素以及`<a>`链接来构建的。这些元素配合数据属性（data attributes）和...
Swiper移动端选项卡切换
11-22
Swiper 是一款非常流行的开源JavaScript库，主要用于移动设备上的触摸滑动效果，尤其适用于创建滑动轮播图、选项卡切换、页面滑动导航等。在移动端应用开发中，Swiper 的选项卡切换功能能够帮助用户更流畅地浏览和...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【SCI一区】Matlab实现金豺优化算法GJO-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程（毕业优秀项目
07-29
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 该C2C校园二手交易平台，界面简洁明了，能给用户一种美的视觉上的享受。并且操作简单易懂，可以大胆但是毫不夸张的说，本系统适用于99%的青少年愉快的使用，对于不是很了解智能科技的人来说，只要看看就基本可以掌握然后熟练的使用该系统了。并且本系统的动画效果做得非常的完美，前端工作人员争取使用最少的代码实现最炫酷的动态效果，例如3D页面转换，动态加入购物车效果，搜索的时候动态自动提示商品名字功能等等，无一不是本系统的亮点。由于前端本着使用最少的代码，实现最炫酷的动态效果，所以其性能可以来说是杠杠的。并且前端所构建的网站为响应式网站，当页面的大小发送变化的时候，页面会随着变化，但是我们的变化不会出现任何的纰漏。在兼容性方面，本网站可以完美的兼容ie8+，Firefox8+，chrome6+等等，虽然目前比较少用户使用这些版本以下的浏览器，.................
【创新未发表】Matlab实现白鲸优化算法BWO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
javascript选项卡切换
01-06
以下是一个使用JavaScript实现选项卡切换的例子： ```javascript // 获取选项卡的父元素 var tabsContainer = document.getElementById("tabsContainer"); // 获取所有的选项卡 var tabLinks = tabsContainer....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值