<!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选项卡的更多相关文章

  1. 原生tab选项卡制作

    html部分 <div class="tab"> <div class="nav"> <ul> <li class=& ...

  2. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  3. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  4. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  5. MUI框架-12-使用原生底部选项卡(凸出图标案例)

    MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...

  6. 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  7. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  8. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  9. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

随机推荐

  1. 15 自定义分页pagination全局组件

    1.Pagination.vue <template> <el-pagination @size-change="handleSizeChange" @curre ...

  2. Codeforces Round #668 (Div. 2)A-C题解

    A. Permutation Forgery 题目:http://codeforces.com/contest/1405/problem/A 题解:这道题初看有点吓人,一开始居然想到要用全排序,没错我 ...

  3. 剑指 Offer 56 - II. 数组中数字出现的次数 II

    题目描述 在一个数组 nums 中除一个数字只出现一次之外,其他数字都出现了三次.请找出那个只出现一次的数字. 示例1: 输入:nums = [3,4,3,3] 输出:4 示例2: 输入:nums = ...

  4. 用于测试XmlAnalyzer 1.00版的八个测试用例

    XmlAnalyzer 工程目的:将XML的属性和子节点按字母序排列,然后整形输出: 08. 原文=<project xmlns="http://maven.apache.org/PO ...

  5. 20190917-02Linux网络配置 000 003

    重启网络 最后reboot重启系统 继续ping 自己的window电脑的ip ctrl+C结束 继续在windows电脑上ping虚拟机上的linux系统

  6. java实现zip文件的解压

    使用到的包 org.apache.commons 下载文件 url:文件所在地址需要是http:// filePath:将下载的文件保存的路径 public static void getDownlo ...

  7. leetcode刷题-55跳跃游戏

    题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 思路 贪心算法:记录每一个位置能够跳跃到的最远距离,如果 ...

  8. python应用 曲线拟合 02

    前情提要 CsI 闪烁体晶体+PD+前放输出信号满足: $U(t) = \frac{N_f\tau_p}{\tau_p-\tau_f} \left[ e^{-\frac{t}{\tau_p}}-e^{ ...

  9. 关于Nginx mmap(MAP_ANON|MAP_SHARED, 314572800)报错

    mmap 报错解决 今天修改了一下测试环境的Nginx的nginx.conf,然后做检测的时候报了一个错误 /usr/local/bin/nginx -c /usr/local/etc/openres ...

  10. centos7使用Minikube“快速搭建“出Kubernetes本地实验环境(踩坑集锦及解决方案)

    先决条件(先假设你做完这两步骤) 检查Linux是否支持虚拟化,验证输出是否为非空如何开启虚拟化 grep -E --color 'vmx|svm' /proc/cpuinfo 安装 kubectl ...