当前位置：移动技术网 > IT编程>开发语言>JavaScript > javascript实现表现、结构、行为分离的选项卡效果！

javascript实现表现、结构、行为分离的选项卡效果！

2019年08月01日 | 移动技术网IT编程 | 我要评论

其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。

<!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=gb2312"> 
<title>无标题文档</title> 
 
<style type="text/css"> 
<!-- 
 body { 
  margin:50px; 
  padding: 0px; 
   
 } 
 .tabs { 
  width:auto; 
  height:auto; 
  border: 0px solid red; 
 } 
 .selecttab,.unselecttab { 
  border:1px solid #bddff9; 
  border-bottom-width: 0; 
  width:150px; 
  height:23px; 
  line-height:23px; 
  vertical-align: middle; 
  text-align:center; 
  background-color:#37709b; 
  margin: 0; 
  margin-right: 18px; 
  font-weight:bold; 
  font-size:14px; 
  color:#fff; 
  cursor: pointer; 
  float:left; 
 } 
 .unselecttab { 
  color:#37709b; 
  background-color: white; 
 } 
.selectcontent { 
    border-top: 5px #37709b solid; 
    padding-top: 8px; 
    clear: both; 
 } 
 .unselectcontent { 
     display: none; 
 }

--> 
</style> 
</head> 
<body> 
<div class="tabs"> 
    <h1 onmouseover="changtab(this)"> 选项卡[1] </h1> 
    <h1 onmousemove="changtab(this)"> 选项卡[2] </h1> 
    <h1 onmouseover="changtab(this)"> 选项卡[3] </h1> 
    <h1 onmousemove="changtab(this)"> 选项卡[4] </h1> 
    <div>1经过前述的多个步骤，一个基本的chm文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> 
    <div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div> 
    <div>3经过前述的多个步骤，一个基本的chm文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> 
    <div>4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div> 
</div> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

PHP+txt聊天室

PHP+txt聊天室最近朋友发了一篇ASP+txt聊天室，非常不爽，我可是支持PHP的啊所以就发了这篇文章由于是... [阅读全文]
教你如何做一个优雅的Ecmascripter /转

看看这些被同事喷的JS代码风格你写过多少殷荣桧JavaScript今天现在写代码比以前好多了，代码的格式都有es... [阅读全文]
Javascript知识点总结（一）

一、走进javascript什么是JS？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型... [阅读全文]
利用JS来判断输入是否为空以及重复密码是否相同

登录页面HTML如下：<div class="form-group has-feedback"> ... [阅读全文]
Vue入门基础——第一次笔记

Vue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层... [阅读全文]
react+antd 给switch设置初始值变量

在react项目中表单内的switch功能，设置初始值为变量，所以需要在Form.Item 标签上添加一个val... [阅读全文]
@vue/cli 4.4.6解决跨域问题

在前端@vue/cli 4.4.6解决跨域问题，可以通过vue.config.js配置完成例如：需要访问http... [阅读全文]
offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; ... [阅读全文]
vue 性能优化：gzip编译压缩

安装：compression-webpack-pluginnpm install compression-web... [阅读全文]
react打包压缩jscssimg

前言本文基于 “react”: “^16.13.1”,“webpack”: “4.42.0”,“antd”: “... [阅读全文]

网友评论


验证码：

javascript实现表现、结构、行为分离的选项卡效果！

2019年08月01日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论