顺手写的一个tab样式

最新推荐文章于 2024-04-14 15:25:06 发布
最新推荐文章于 2024-04-14 15:25:06 发布
阅读量274 收藏
点赞数
分类专栏： 网络 文章标签： 体育 活动 XHTML HTML
[img]http://zsp.iteye.com/upload/picture/pic/32367/2131a193-a089-36bb-beee-77854668296f.png[/img]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.tab {border-left:#E4E4E4 1px solid;}
.tab a{text-decoration:none;border-top:1px #E4E4E4 solid;border-right:1px #E4E4E4 solid;
border-bottom:1px solid #E4E4E4;
background:#F6F5EE;
padding:5px;
color:#369;
float:left;}
.tab .on{border-bottom:1px solid #fff;background:#fff;color:#666}
.tabspace{border-bottom:1px solid #E4E4E4;padding-top:11px;*padding-top:10px}
.tabbody{border:#E4E4E4 1px solid;border-top:0;padding:5px;padding-top:1px;}
</style>
</head>
<body>
<div style="width:300px;margin:auto">

<div class="tab">
<a>体育</a>
<a class="on">体育</a>
<a>体育</a>
<div class="tabspace"> </div>
</div>
<div class="tabbody">
<div>
<p>北师北邮小西天玉桃园集体活动</p>
<p>2月25日 周三 - 3月24日 周二</p>
</div>
</div>

</div>

</body>
</html>
zuroc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写制作一个tab选项卡
weixin_44539055的博客
06-27 910
手写制作一个tab选项卡： HTML 代码： 我的认证 实名认证 手机认证 学历认证 视频认证 @*第二页*@ ...
手写tab选项卡
lovely960823的博客
06-26 716
tab选项卡，我原来也不知道这个叫什么，我只知道，同一个页面有多个按钮，点击不同的按钮，显示的数据不同，后来慢慢了解到的，今天来实现一个tab选项卡，非常简单。 这里先献上效果图。默认加载第一个按钮数据的信息 点击的时候显示第二个按钮的信息 这样类推 开始上主要实现代码 //只有三个div在主页面，这三个div里面我已经放上数据了，每个div都有自己对应的点击事件 <body...
tab手写切换
EstherNi的博客
02-21 312
tab手写切换
手写切换tab
Sunshinedada的博客
02-22 825
HTML： <a-Row> <a-col :span="6" class="leftContentTabs" v-for="(i, index) in searchForm.leftContentTabsList" :key="index" @click="changeTabs(i)"> <div class="leftContentTabsText" :class="`${i.tabsBaseText}_${mobileType === i.code?'2'.
手写tab标签切换，内容区域跟着切换
yyanglirong的博客
10-21 512
话不多说，直接上代码 html <div id=city class="box" style="position: relative; width:100%;"> <div class="box-tab "> <P class="tips">标签一</P> <p id=line style="opacity:1" class="box-tab-line"></p> </d
使用vue.js写一个tab选项卡效果
10-20
vue-router为被点击的router-link元素自动添加一个router-link-active类，开发者可以定义这个类的样式，从而实现Tab切换效果。这种方法的优点是将视图的切换与路由的跳转相结合，不需要额外的组件状态管理。 2. ...
以BootStrap Tab为例写一个前端组件
08-29
Bootstrap Tab 是一个流行的用于创建标签页的组件，通过它我们可以轻松地展示多个内容区域，而只显示一个区域的内容。在本文中，我们将探讨如何以 Bootstrap Tab 为例，封装一个前端组件，并介绍组件开发的基本步骤...
纯css+js写的一个简单的tab标签页带样式
12-12
最近经常要用tab标签页，所以写了一个简单的，以后用的话直接拷贝一个，稍微改改就OK了。 先看效果图： 接下来看下代码怎么写的吧： 一、sp文件easytab.jsp 代码如下: <%@ page language=”java” import=”...
一个tab标签切换效果代码
09-06
JavaScript代码采用了一个简单的函数`settab(m, n)`，参数`m`表示父容器的ID（如`menu4`），`n`表示当前选中的选项卡索引。这个函数遍历所有选项卡和内容区块，通过修改`className`和`style.display`属性来实现选中...
手写一个Tab（美团一面）
最新发布
m0_65226637的博客
04-14 209
美团一面的时候被问到通过Vue框架手写一个Tab，由于一直在使用UI组件，导致一时间没有完全写出来，记录一下实现。
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
移动端手写tab栏
前端小99的博客
01-05 473
Demo 使用Vue.js实现 javascript new Vue({ el: "#app", data: { //可以手写 可以掉后台接口 二选一 eleFileList: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄', '守望先锋' ], activeName: '', //选中样式 }, //获取接口中的内容 mounted() { if (Array.isArray(this.eleFileList) &am.
vue手写tab分页，项目
晚风的博客
10-14 311
手写分页效果如图： 代码如下： <ul class="tabs_item"> <li v-for="(index,item) in tabs" :class="{tabs_items:true,active:index == num}" @click="tab(index)" > {{ inde.
利用Js如何写tab
ALihexingyu的专栏
04-19 787
js接触了很久，知道最近的几个月，才越来越喜欢上这个，一直都没有尝试过自己篇博客，尝试用简单的语言，和大家分享一下自己的学习经验。      首先是html部分，在这里举例做三个的标签的。                                   标签1                 标签2                 标签3
uniapp小程序手写tab导航栏切换（点击切换样式，动态样式绑定）
weixin_45745641的博客
12-27 3393
最近写uniapp，ui里面有一个导航栏切换的逻辑，因为要跟UI保持一致，对于组件库很难实现高度定制，所以这里就自己手写实现一个点击切换的导航栏。先看下图效果：主要实现的是通过点击切换导航栏，并且样式有一个切换的效果，大家可以根据自己的需求进行样式的DIY。
tab标签切换手写代码实现
weixin_43970122的博客
07-07 183
tab标签切换手写代码实现
js 原生手写tabs标签页
05-21 2213
js 原生手写tabs标签页 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ ...
手写tab左右切换
weixin_46544600的博客
03-02 445
效果 ：点击左右两个按钮达到切换效果（利用transform 进行平移） <div class="app"> <div class="tab-wrap"> <div class="tab"> <div ref="itemWrap" class="item-wrap" :style="{transform: `translateX(${distance}px)`}"> <div v-for="(i
vue手写tab栏切换
weixin_54682264的博客
08-18 1033
vue手写tab栏切换
react写一个tab切换
06-07
好的，这里简单给您介绍一下如何用 React 实现一个 Tab 切换的组件。 首先，我们需要创建一个 Tab 组件，它会包含多个 TabItem 子组件，每个子组件代表一个 Tab 标签。我们可以通过 props 传递需要显示的标签和对应的内容。 组件代码如下： ```jsx import React, { useState } from 'react'; function Tab(props) { const [activeIndex, setActiveIndex] = useState(0); const { tabs } = props; return ( <div className="tab"> <div className="tab-header"> {tabs.map((tab, index) => ( <div key={index} className={`tab-item ${index === activeIndex ? 'active' : ''}`} onClick={() => setActiveIndex(index)} > {tab.title} </div> ))} </div> <div className="tab-content"> {tabs[activeIndex].content} </div> </div> ); } export default Tab; ``` 接下来，我们需要在 CSS 中定义样式来控制 Tab 的显示效果。这里只给出一个简单的样式，您可以根据自己的需求进行修改。 ```css .tab { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .tab-header { display: flex; } .tab-item { flex: 1; padding: 10px; text-align: center; cursor: pointer; } .tab-item.active { background-color: #ccc; } .tab-content { padding: 10px; } ``` 最后，我们可以在父组件中使用 Tab 组件，传入需要显示的标签和对应的内容。 ```jsx import React from 'react'; import Tab from './Tab'; function App() { const tabs = [ { title: 'Tab 1', content: 'This is Tab 1 content', }, { title: 'Tab 2', content: 'This is Tab 2 content', }, { title: 'Tab 3', content: 'This is Tab 3 content', }, ]; return ( <div> <Tab tabs={tabs} /> </div> ); } export default App; ``` 这样就完成了一个简单的 Tab 切换组件。希望这能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值