Tab选项卡功能以及单选复选功能

最新推荐文章于 2024-04-19 11:12:35 发布
最新推荐文章于 2024-04-19 11:12:35 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivianluolita/article/details/53017915
版权

HTML

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>修改正文排版</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureVersionModule.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/Sortable.min.js"></script>
</head>
<body>
<!-- 头部样式 -->
<div class="Top">
    <a href="wxPictureCutpicAdd.html" class="BtnCancel">取消</a>
    <a href="javascript:void(0)" class="BtnInsert" ><div class="EditOrd">插入</div></a>
    <h1>板式模块</h1>
</div>
<div class="wxPictureVersionModule">
    <div class="TabListContent">
    <ul class="TabList">
        <li class="selected Commonliend"><a><h3>图文</h3></a></li>
        <li class="Commonliend"><a><h3>标题</h3></a></li>
        <li class="Commonliend"><a><h3>正文</h3></a></li>
        <li class="Commonliend"><a><h3>背景</h3></a></li>
        <li class="Commonliend"><a><h3>分割线</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
<!--    <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>-->


    </ul>
    </div>
<!--   <ul class="TabListContentAdd">

    </ul>-->

    <div class="TabListItem">
        <div class="ListItem">
        <div class="ListItem1">
            <div class="ItemIcon">
                <img src="../css/images/../images/Mobile_bg0302.png">
            </div>
        </div>
        </div>
        <div class="ListItem">
        <div class="ListItem1-2" >
            <div class="ItemIcon">
                <img src="../css/images/../images/Mobile_bg0304.png">
            </div>
        </div>
        </div>
    </div>
    <!--标题-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    标题
                </div>
            </div>
        </div>
    </div>
    <!--正文-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    正文
                </div>
            </div>
        </div>
    </div>
    <!--背景-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    背景
                </div>
            </div>
        </div>
    </div>
    <!--分割线-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    分割线
                </div>
            </div>
        </div>
    </div>
    <!--小符号-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    小符号
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".ListItem").click(function(){
                //如果已经被选中
                if($(this).find(".ItemIcon").hasClass("SelectedItem")){
                    $(this).find(".ItemIcon").removeClass("SelectedItem");
                    $(this).find(".ItemIcon").css("border","1px solid #efeff4");
                }
                //如果没被选中
                else{
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid #f43530");
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");
                }
        });
        /*Tab选项卡*/
        $(".TabList li").click(function(){
            $(".TabList li").eq($(this).index()).addClass("selected").siblings().removeClass('selected');
           $(".TabListItem").hide().eq($(this).index()).show();
        });
    });
</script>
</body>
</html>

单选功能 

 $(".ListItem").find(".ItemIcon").removeClass("SelectedItem");
            $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");


CSS


body{
    margin:0px auto;
    background:#efeff4;
    position:relative;
    display:block;
    padding:44px 0px 64px 0px;
    height: 100%;
}
/* 头部样式 */
.Top .BtnInsert{
    height:44px;
    float:right;
    padding-right:10px;
    font-size:16px;
    color:#228924;
    line-height:44px;
}
.Top .BtnCancel{
    height:44px;
    line-height:44px;
    float:left;
    padding-left:10px;
    background-size:12px 20px;
    color:#d6d6d7;
    font-size:16px;
}
.wxPictureVersionModule{
    width: 100%;
}
/*Tab选项卡*/
.wxPictureVersionModule .TabListContent{
    width: 72px;
    position: fixed;
    bottom: 0px;
    top: 44px;
    left: 0px;
    overflow:auto;
    overflow-x:hidden;
}
.wxPictureVersionModule .TabList{
    width:68px;
    height:100%;
    background-color:#ffffff;
    font-size: 16px;
    line-height: 44px;
    border-right:1px solid #d9d9d9;
}
.wxPictureVersionModule .TabList .selected{
  border-left:2px solid #f43530;
  background-color:#efeff4;
    border-right:none;
    color: #f43530;
}

.wxPictureVersionModule .TabList .selected a{
    color: #f43530;
}

.wxPictureVersionModule .TabList li{
    width:67px;
    height:44px;
    border:1px solid #d9d9d9;
    background-color:#ffffff;
    border-top: none;

}

.wxPictureVersionModule .TabList h3{
    padding-left: 10px;
    font-size: 16px;
}

.Liend {
    border-bottom:1px solid #efeff4;
}

/*图文1-1*/
.TabListItem{
   overflow: hidden;
    zoom: 1;
}
.TabListItem .ListItem1{
    margin-top: 10px;
    margin-left: 82px;
    margin-right: 10px;
}


.TabListItem .ListItem1 .ItemIcon{
    border: 1px solid #efeff4;
    position: relative;
}

.TabListItem .ListItem1 .ItemIcon img{
    width: 100%;
    height: auto;
    vertical-align: middle;
}




.TabListItem .SelectedItem{
    border: 1px solid #f43530;

}

.TabListItem .ListItem1 .SelectedItem:after{
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
    background-size: 22px 22px;
    width: 100%;
}

@media(min-width:600px){
    .TabListItem .ListItem1 .ItemIcon{
        width:275px;
        margin: 0 auto;
        position: relative;
    }

    .TabListItem .SelectedItem{
        border: 1px solid #f43530;
    }
    .TabListItem .ListItem1 .SelectedItem:after{
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
        background-size: 22px 22px;
        width: 100%;
    }
}

/*图文1-2*/

.TabListItem .ListItem1-2{
    margin-top: 10px;
    margin-left: 82px;
    margin-right: 10px;
}


.TabListItem .ListItem1-2 .ItemIcon{
    border: 1px solid #efeff4;
    position: relative;

}

.TabListItem .ListItem1-2 .ItemIcon img{
    width: 100%;
    height:auto;
    vertical-align: middle;
}


.TabListItem .SelectedItem{
    border: 1px solid #f43530;

}

.TabListItem .ListItem1-2 .SelectedItem:after{
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
    background-size: 22px 22px;
    width: 100%;
}

@media(min-width:600px){
    .TabListItem .ListItem1-2 .ItemIcon{
        width:275px;
        margin: 0 auto;
        position: relative;
    }

    .TabListItem .SelectedItem{
        border: 1px solid #f43530;
    }
    .TabListItem .ListItem1-2 .SelectedItem:after{
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
        background-size: 22px 22px;
        width: 100%;
    }
}


Vivianluolita
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
checkbox单选复选按钮美化代码.zip
07-05
"Checkbox单选复选按钮美化代码.zip" 提供了一种使用CSS3技术来提升这些元素视觉吸引力的方法。下面我们将详细探讨这一主题。 CSS3是层叠样式表的最新版本，它引入了许多新特性，如选择器、边框和背景图像、过渡、...
单选tab标签及样式
guanguan0_0的博客
07-04 1026
小程序开发中，经常遇到页签或是一些标签的单选功能，如下：（1）头部页签（2）分类选择这两种情况一样，以第二种为例：wxml：&lt;view class='filter'&gt;    &lt;view wx:for='{{category}}' class='{{tabflag==index?"tabhover":""}}' bindtap='changetab' data-index='{{i...
利用单选框的单选特性作tab切换
weixin_30914981的博客
05-28 408
<RadioGroup v-model="selectType" type="button" @onchange="selectTypeChange"> <Radio label="全部"></Radio> <Radio label="图文"></Radio> ...
vueelementui+tabs选项卡样式更改-内容待递增
最新发布
weixin_58412143的博客
04-19 593
【代码】vueelementui+tabs选项卡样式更改。
自制单选框选项卡
依然的博客
06-05 455
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具和关键技术：Visual Studio 2015，Html、JavaScript 作者：金建勇 撰写时间：2019年6月3日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 在一个项目中，选项卡都是很常见的，当然有各种各样的选...
纯CSS制作的TAB选项卡
weixin_33826609的博客
05-22 113
代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。 关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。 HTML代码 &lt;ul class="tabs"&gt; &lt;li&gt; &lt;input type="radio" name="tab...
Android UI 之 TabLayout动态添加tab实现筛选及自动偏移（全选，单选）
热门推荐
行动者&&职业化
08-01 1万+
一丶效果展示（代码链接见文末） 二丶概述 1.Android开发，数据的筛选通常由后台处理，网络请求穿不同参数，即可。理论上TabLayout可以实现单选多选的筛选。 2.自动偏移的重要性，1.提醒用户屏幕外有可选项，2.操作简单，体验效果提高。 三丶功能介绍 1.RecyclerView 实现上拉加载下拉刷新 文章参考：http://blog.csdn.net/dt2
jQuery单选框跟复选框美化代码.zip
07-05
单选按钮通常用于在一组互斥选项中选择一个，而复选框允许用户从多个选项中选择零个、一个或多个。在HTML中，它们分别用`<input type="radio">`和`<input type="checkbox">`来定义。 jQuery美化这些元素主要涉及...
CSS3实现自定义复选框.zip
07-05
标签"JS特效-选项卡TAB"可能暗示了这个项目中可能还包含了JavaScript的交互效果，例如，通过JavaScript监听复选框或单选按钮的状态变化，动态更新页面内容或执行其他操作。例如： ```javascript document....
功能测试用例大全1500条
08-02
- **选项卡**：测试不同选项卡间切换，内容加载和保存。 - **默认焦点**：验证启动时默认选中的控件。 - **TAB顺序**：检查键盘导航的逻辑性。 - **快捷键/热键**：测试快捷方式是否有效并符合用户习惯。 - **...
jQuery表格行全选反选单选代码.zip
07-05
首先，`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框操作。当用户点击表格的行时，行内的复选框会被选中或取消选中，同时该行会呈现出高亮状态，以提供清晰的视觉反馈。这种功能在数据管理和筛选场景中...
elementUI的Table分页多选框
Baby_加油_的博客
11-18 2692
目的：实现进入页面显示默认的选中项，在用户重新选择后，将选择的和取消选择的数据提交给后台；这里涉及到一个分页的问题，表格是可分页的表格，所以要存储用户的选项 1.element-ui的table表格的多选框默认选中 data(){ return{ tableData:[],//table数据 } }, watch:{ tableData(val){ this.$nextTick(()=>{ this.tableData.forEach(row => {
【Layui】选项卡Tab：完美实现网页内容分类与导航
无法自律的人的博客
07-12 5759
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
IOS应用开发13——UITableView单选及样式设置
Ably_Clove
09-19 1615
有很多时候会用到，UITableView的选择，多选或者单选，单选要简单一些
ElementUI中Tabs标签页样式修改------胶囊Tab切换栏
m0_70782896的博客
01-18 1043
【代码】ElementUI中Tabs标签页样式修改------胶囊Tab切换栏。
Vue学习（十六）——案例：tab选项卡
云中、漫步的博客
10-04 505
目录
element-ui在table分页的情况下实现多页筛选(单列/多列)
Dreamlxx的博客
04-19 6411
element-ui官网提供的筛选样例只能对当前页的数据进行筛选 我这里是在表头上嵌入popover实现多页筛选，效果如下 代码如下 <template> <div> <!-- 表格 --> <el-table :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) " style="
element-ui之el-table利用多选实现单选效果
sumimg的博客
09-13 1828
demo中版本element-ui版本为: “^2.15.12”）在element-ui中是为我们准备好了可直接使用的单选与多选属性的。但是单选与多选的形式不一样，在某些情况下我们可能想让它们的选择方式尽量统一，于是我想能不能把利用多选属性实现多选，并用一个变量来控制表格是多选还是单选。要实现单选有两步：一、隐藏多选选择框。二、每次选择只能选择一个。
vue路由实现tab选项卡功能
06-12
Vue路由可以很方便地实现Tab选项卡功能，具体实现方法如下： 1. 首先，定义路由配置，每个Tab对应一个路由： ```js const routes = [ { path: '/home', component: Home }, { path: '/about', component: About ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值