前端中标签页的手写方法

虽然流行用框架写出来这里也可以用手写方法写出来也并不是这么复杂

首先为了实现如下效果的标签

我们可以在前端把两个表直接输出出来

                <table class = "tag char" id = "tagf" ><tr><td>Found</td><td>Found time</td><td>Found where</td><td>Found detail</td><td>Manipulate</td></tr>......</table><table class = "tag char" id = "tagl" ><tr><td>Lost</td><td>Lost time</td><td>Lost where</td><td>lost detail</td><td>Manipulate</td></tr>......

然后注明CSS

#tagl{display: none;
}
#tagf{display: none;
}

让两者隐藏那么继续绘制按钮

                <button class = "label" id = "ForF" >FOUND</button><button class = "label" id = "ForL" >LOST</button>

最后一步：加上jQuery 监听器根据用户的动作对其css边框进行变化

    $("#tagl").fadeIn();  $("#ForL").css("border-bottom-color", "white");$("#ForL").css("border-top-color", "tomato");$("#ForL").css("border-top-width", "5px");$("#tagf").hide();$("#ForL").click(function () {//根据点击事件 变化css和不同表的出现$("#tagl").fadeIn();$("#tagf").hide();//下边框变白$("#ForL").css("border-bottom-color", "white");//上边框保持$("#ForL").css("border-top-color", "tomato");$("#ForL").css("border-top-width", "5px");//另一个按钮$("#ForF").css("border-bottom-color", "black");$("#ForF").css("border-top-color", "white");})$("#ForF").click(function () {//相反操作 $("#tagf").fadeIn();$("#tagl").hide();$("#ForF").css("border-bottom-color", "white");$("#ForF").css("border-top-color", "tomato");$("#ForF").css("border-top-width", "5px");//另一个按钮$("#ForL").css("border-bottom-color", "black");$("#ForL").css("border-top-color", "white");})

当用户点击其中一个按钮时就让另一个表隐藏然后变化相应的CSS

那么就完成啦！

前端中标签页的手写方法相关推荐

HTML5期末大作业：商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript
HTML5期末大作业:商城购物网站设计--仿唯品会商城(5页) 纯手写 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页设计 ...
对话框中加入标签页的5种方法
(2008-07-08 15:25 博客搬家拾遗) 标签页是MFC控件里有一点难用的东西,今天看到了一篇相关文章,觉得写得比较系统,而且浅显易懂,特地转来,与大家分享的同时也留备自己以后查用. (以下 ...
all方法手写promise_前端进阶高薪必看手写源码篇
前言此系列作为笔者之前发过的前端高频面试整理的补充会比较偏向中高前端面试问题当然大家都是从新手一路走过来的感兴趣的朋友们都可以看哈初衷我相信不少同学面试的时候最怕的一个环节就是手写代码大 ...
前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端进阶高薪必看-手写源码篇（高频技术点）...
前言此系列作为笔者之前发过的前端高频面试整理的补充会比较偏向中高前端面试问题当然大家都是从新手一路走过来的感兴趣的朋友们都可以看哈初衷我相信不少同学面试的时候最怕的一个环节就是手写代码大 ...
Bootstrap 标签页Tab插件使用方法
标签页 Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-tab.js 文件. 调用方式 1.dat ...
Array.isArray，Array.from， Array.entries，Array.incledes的实现原理，分别手写方法
1.Array.isArray 基本使用 const arr = ["1"]; console.log("isArray:", Array.isArray(ar ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字
公司有个需求,在ant-design-vue的标签页上,在tab选项卡头增加文字. 具体需求效果,如下图. 实现原理: 一.主要用到插槽(slot) 二.代码如下: <a-tabs style= ...
Electron 中的 webview 实战 —— 手写简易浏览器
webview 标签的使用 webview 标签是 Electron 提供的一个类似于 web 中 iframe 的容器,可以嵌入另外的页面: <body><p>下面使用 we ...

前端中标签页的手写方法

前端中标签页的手写方法相关推荐

最新文章

热门文章