简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿php中文网选项卡和聊天对话框2018-04-02

仿php中文网选项卡和聊天对话框2018-04-02

张鑫的博客
张鑫的博客原创
2018年04月02日 13:05:17645浏览

选项卡效果图：

001.png

选项卡代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战1：仿PHP中文网选项卡</title>
	<style type="text/css">
		h2{
			text-align: center;
		}

		.box{
			width: 550px;
			height: 550px;
			background-color: white;
			border:1px solid lightgray;
			margin: auto;


		}

		.box>ul{
			margin: 0;
			padding: 0;
			background-color:#F8F8F8;
			overflow: hidden;
		}

		.box>ul li{
			float: left;
			list-style-type: none;
			width: 90px;
			height: 36px;
			border-right:1px solid lightgray; 
			border-bottom:1px solid lightgray; 
			text-align: center;
			line-height: 36px;
		}

		.box>ul .active{
			background-color: white;
			font-weight: bolder;
			border-bottom:none;
			border-top:3px solid orangered;

		}

		.box>ul+span{
			float: right;
			width: 90px;
			height: 36px;
			margin-top: -36px;
			line-height: 36px;
		}

		.box>ul+span a{
			text-decoration: none;
			color: black;
		}

		.box div ul{
			margin: 0;
			padding: 20px;
			list-style-type: none;			
		}
		.box div ul a{
			line-height: 1.7em;
			text-decoration: none;
			color: gray;
		}

		.box div ul span{
			float: right;
			color: red;
		}

		.box div ul a:hover{
			color: black;
		}

		.box div{
			display: none;

		}
	</style>
</head>
<body>
        <!-- 标题 -->
	<h2>实战1：仿PHP中文网选项卡</h2>
	<div class="box">
		<!-- 1.先写ul列表 -->
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<!-- 2.写右边的“更多下载”标签 -->
		<span><a href="">更多下载>></a></span>

		<!-- 3.写中间的列表 -->
		<div style="display: block;">
			<ul>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
			
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				
			</ul>
		</div>

	</div>

	<script type="text/javascript">
		// 1.获取选项卡和对应的列表
		var box=document.getElementsByClassName('box')[0]
		var ul = box.getElementsByTagName('ul')[0]
		var li = ul.getElementsByTagName('li')
        
		var div=box.getElementsByTagName('div')

		for(var i=0;i<li.length;i++ ){
			li[i].index=i
			li[i].onmouseover=function(){

				for(var i=0;i<li.length;i++){
					li[i].className='none'
					div[i].style.display='none'
				}
				this.className='active'
				div[this.index].style.display='block'
			}
		}
		

		


	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

聊天对话框效果图：

002.png

聊天对话框代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战2：在线客服</title>
	<style type="text/css">
	    h2{
	    	text-align: center;
	    } 
		.box{
			width: 400px;
			height: 650px;
			background-color: skyblue;
			margin: auto;
		}
		.box div{
			width: 360px;
			height: 500px;
			border:3px double green;
			background-color: white;
			margin: auto;
		}

		ul{
			margin: 0;
			padding: 15px;
			list-style-type: none;
			line-height: 2em;
			overflow: hidden;
			/*border: 1px solid red;*/
		}
		table{
			width: 90%;
			height: 80px;
			margin: auto;
		}

		textarea{
			resize:none;
		}

		button{
			width: 50px;
			height: 30px;
			background-color: green;
			color: white;
			border: none;
		}

		button:hover{
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul></ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="40" rows="5" name="text"></textarea></td>
				<td><button type="button">发送</button></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		// 获取文本输入框
		var text=document.getElementsByName('text')[0]
		// 获取发送按钮
		var button=document.getElementsByTagName('button')[0]
		// 获取文本显示框
		var ul=document.getElementsByTagName('ul')[0]
		var pic1='<img src="image/1.jpg" alt="" width="30" height="30" style="border-radius:50%"/>'
		var pic2='<img src="image/2.jpg" alt="" width="30" height="30" style="border-radius:50%"/>'
		var sum=0

		// 给按钮添加点击事件
		button.onclick=function(){
			// alert(text.value)
			if(text.value.length==0){
				alert('客观，请输入内容')
				return false
			}
			var usercomment=text.value
			text.value=''
			// 创建一个新节点
			var li=document.createElement('li')
			li.style.overfolw='hidden'
			li.style.float='right'
			li.innerHTML=usercomment+pic1
			sum+=1
			ul.appendChild(li)
			
			setTimeout(function(){
				var info=['想你了，宝贝','和我在一起好不好','我想和你做羞羞的事','我给你1000万你就答应我好不']
			    var temp=info[Math.floor(Math.random()*4)]
				// 创建一个回复的节点
				var reply=document.createElement('li')
				reply.style.clear='both'
				// reply.style.vertical-align='top'
				reply.innerHTML=pic2+'<span style="color:red">'+temp+'</span>'
				sum+=1
				ul.appendChild(reply)
			},2000)	

			if(sum>9){
				ul.innerHTML=''
				sum=0

			}

		

		}
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码：

1.jpg2.jpg3.jpg4.jpg5.jpg

上一条：0328律师网站制作下一条：js实现客服和选项卡
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多