原生tab选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生tab选项卡</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.fatherDom{
width: 1000px;
margin: 0 auto;
}
.fatherDom .contentDom{
margin:100px 0 0 0;
}
.fatherDom .contentDom li{
width: 1000px;
height: 300px;
background: #FFF0FF;
list-style: none;
box-shadow: 0 2px 15px 0 rgba(186,186,186,0.50);
border-radius: 5px;
}
.fatherDom .pageDom{
width: 400px;
height: 50px;
margin-top: 20px;
list-style: none;
border: 1px solid #ffae00;
overflow: hidden;
border-radius: 6px;
border-right:none;
float: right;
}
.fatherDom .pageDom li{
list-style: none;
float: left;
text-align: center;
height: 50px;
line-height: 50px;
border-right: 1px solid #ffae00
}
.active{
background: #FEF0F0;
color: #333;
}
.none{
display: none;
}
.block{
display: block;
}
</style>
<body>
<div class="fatherDom">
<ul class="contentDom">
<li class="none">1111111111111</li>
<li class="none">222222222</li>
<li class="none">333333333</li>
<li class="none">444444444</li>
<li class="none">555555555</li>
</ul>
<ul class="pageDom" id="pageDom">
</ul>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
pageEvent()
pageItemClick()
close()
}
//1，先动态给li赋值
function pageEvent(){
for(var i=1;i<6;i++){
var eleLi=document.createElement('li');
eleLi.innerHTML='第'+i+'项'
document.getElementById('pageDom').appendChild(eleLi)
}
//2，再计算有多少个li
var liLength=$('.pageDom li').length
//3，获取大的ul的长度
var pageDomWidth=$('.pageDom').width();
//4，算出平均宽度
var itemWidth=(pageDomWidth/liLength)
//5，给每一个li添加宽
$('.pageDom li').css("width",(itemWidth-1)+'px')
$('.pageDom li').eq(0).addClass('active')
$('.contentDom li').eq(0).addClass('block').removeClass('none')
}
function pageItemClick(){
$('.pageDom li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
var pageIndex=$(this).index()
$('.contentDom li').eq(pageIndex).show().siblings().hide();
})
}
</script>
</html>
原生tab选项卡的更多相关文章
- 原生tab选项卡制作
html部分 <div class="tab"> <div class="nav"> <ul> <li class=& ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- MUI框架-12-使用原生底部选项卡（凸出图标案例）
MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...
- 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
随机推荐
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
- 数据库的表的字段名称与实体类（pojo）不对应解决方案
数据库的表的字段名称与实体类(pojo)不对应解决方案 数据库表 
- 刀哥多线程自动释放池autoreleasepool
自动释放池 作用 自动释放对象的 所有 autorelease 的对象,在出了作用域之后,会被自动添加到最近创建的自动释放池中 自动释放池被销毁或者耗尽时,会向池中所有对象发送 release 消息, ...
- [LeetCode]287. 寻找重复数(二分)
题目 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个重复的整数.假设只有一个重复的整数,找出这个重复的数. 示例 1: 输入: [ ...
- [剑指Offer]65-不用加减乘除做加法
题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题解 用位运算模拟加法的三步: 无进位加法:异或运算. 进位:与运算再左移一位. 直到进位为0结束. 代码 pub ...
- 【二叉树-BFS系列1】二叉树的右视图、二叉树的锯齿形层次遍历
题目 199. 二叉树的右视图 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. 示例: 输入: [1,2,3,null,5,null,4] 输出: [1, ...
- Centos6.5 离线 Openssh 升级
目录 OpenSSH 升级 一.基于 Dropbear 设置备用 ssh 服务器 二. Openssh 更新 2.1 ssh配置 备份 2.2 openssh 升级 Openssl 升级(由于Open ...
- Arnold变换（猫脸变换）
Arnold变换是Arnold在遍历理论研究中提出的一种变换.由于Arnold本人最初对一张猫的图片进行了此种变换,因此它又被称为猫脸变换.Arnold变换可以对图像进行置乱,使得原本有意义的图像变成 ...