<!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. 做SQL解析时遇到的问题

    相对于算术表达式,Json和XML等解析,SQL就比较复杂了. 举个例子来说:符号“(”是目前的SqlAnalyzer1.00中作为进入递归的标志之一,到“)”结束,中间是个查询语句.如果测试用例也是 ...

  2. shell 逻辑判断

    || && 查了 Stack Overflow ||,表示或,从前往后执行,执行第一个真 &&,前者是真才会接着执行 ; 表示接着往下执行,不管前者如何 #!/bin/ ...

  3. 10.深入k8s：调度的优先级及抢占机制源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 上一篇我们将了获取node成功的情况,如果是一个优先pod获取nod ...

  4. python文件的读写权限以及相关应用read、write和文件指针

    f=open('ceshi.txt','a',encoding='utf-8')r=open('ceshi.txt','r',encoding='utf-8')上面的2种写法可以用with来写:wit ...

  5. [LeetCode]121、122、309 买股票的最佳时机系列问题（DP）

    121.买卖股票的最佳时机 题目 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意 ...

  6. docker部署rockermq集群（docker-compose版本）

    此处采用docker-compose部署 rockermq主主集群模式 创建相关文件夹 此处创建的文件一一对应docker-compose.yml文件中的映射文件夹,酌情创建,主要需要创建配置文件夹. ...

  7. 关于微信小程序官网的使用

    我们在看微信支付相关的东西的时候,会发现有些想找的地址不好找,,没看到入口,接下来我就是整理了一下 链接: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa ...

  8. 执行引擎（Execution Engine）基础知识

    概述 执行引擎是Java虚拟机的核心组成部分之一 虚拟机是一个相对于"物理机"的概念,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处理器.缓存.指令集和操作系统 ...

  9. 深夜，我偷听到程序员要对session下手……

    我是一个web服务器 我是一个web服务器,我的工作是给人类提供上网服务,我每天要为数以万计的人提供网页浏览服务. 已经是深夜了,我还在和手下几个兄弟为了一件事紧张讨论着. "老大,现在咱们 ...

  10. 安装Ubuntu虚拟机

    centos已经满足不了我了,这里就装了个虚拟机,等有钱了再单配台单系统的Linux主机. 一.下载Ubuntu的ISO文件 用国内的网易镜像站点 进去点个16.04.6,然后下个64位的.iso就好 ...