davidbeckham
davidbeckham

原生JavaScript写出Tabs标签页

  最近在重新学习JavaScript，手写了一个tabs标签页。

  话不多说，直接开始。  

  首先，是前端页面。

原生JavaScript写出Tabs标签页_第1张图片

 

图1 tabs

先来把tabs分解一下：原生JavaScript写出Tabs标签页_第2张图片图2 tabs分解

首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。

导航tabs.html代码如下：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <main>
        <div class="tabsbox" id="tab">
            
            <nav class="firstnav">
                <ul>
                    <li class="liactive"><span>测试1span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试2span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试3span><span class=" icon-guanbi">Xspan>li>
                ul>
                <div class="tabadd">
                    <span>+span>
                div>
            nav>

            
            <div class="tabscon">
                <section class="conactive">测试内容1section>
                <section>测试内容2section>
                <section>测试内容3section>
            div>
        div>
    main>

    <script src="js/tabs.js">script>
body>

html>
<style>
 * {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}
style>

由于给导航栏增删查改的js代码很多，我单独用一个js文件写tabs.js，在tabs.html里引用就行。

实现的导航栏功能有：

　　1）导航栏的切换功能

       2）增加导航栏的功能

       3）删除导航栏的功能

   tabs.js代码如下：

  1 var that;
  2 class Tab {
  3     constructor(id){
  4         that = this;
  5         //获取元素
  6         this.main = document.querySelector(id);
  7        
  8         this.add = this.main.querySelector('.tabadd');
  9         //li的父元素
 10         this.ul = this.main.querySelector('.firstnav ul:first-child');
 11         //section的父元素
 12         this.fsection = this.main.querySelector('.tabscon');
 13         this.init();
 14     }
 15     //初始化操作
 16     init(){
 17         this.updateNode();
 18         this.add.onclick = this.addTab;
 19         for(let i = 0;i<this.lis.length;i++){
 20             this.lis[i].index = i;
 21             this.lis[i].onclick = this.toggleTab;
 22             this.remove[i].onclick = this.removeTab;
 23             this.spans[i].ondblclick = this.editTab;
 24             this.sections[i].ondblclick = this.editTab;
 25         }
 26     }
 27     //获取li跟section
 28     updateNode(){
 29         this.lis = this.main.querySelectorAll('li');
 30         this.sections = this.main.querySelectorAll('section');
 31         this.remove = this.main.querySelectorAll('.icon-guanbi');
 32         this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
 33     }
 34     //1.切换功能
 35     toggleTab(){
 36 
 37         that.clearClass();
 38         this.className = 'liactive';
 39         that.sections[this.index].className = 'conactive';
 40     }
 41     clearClass(){
 42         for(let i = 0;i<this.lis.length;i++){
 43             this.lis[i].className = '';
 44             this.sections[i].className = '';
 45         }
 46     }
 47     //2.添加功能
 48     addTab(){
 49         that.clearClass();
 50        //1)添加li元素和section
 51         var random = Math.random()
 52         var li = '
  • 新选项卡X
    • ';
 53         var section = '
    '+random+'
    ';
 54        
 55        //2）把两个元素添加到对应的父级元素中
 56         that.ul.insertAdjacentHTML('beforeend',li);
 57         that.fsection.insertAdjacentHTML('beforeend',section);
 58         that.init();
 59     }
 60     //3.删除功能
 61     removeTab(e){
 62         e.stopPropagation();
 63         var index = this.parentNode.index;
 64         console.log(index);
 65         //删除对应节点
 66         that.lis[index].remove();
 67         that.sections[index].remove();
 68         //删除后及时更新页面中的节点
 69         that.init();
 70         //如果当前页面有选中状态，就不用执行下面的步骤
 71         if(document.querySelector('.liactive')) return;
 72         //让index前一个处于选中状态
 73         index--;
 74         that.lis[index] && that.lis[index].click();
 75     }
 76     //4.修改功能
 77     editTab(){
 78         let str = this.innerHTML;
 79         // console.log(str);
 80         //禁止双击选中文字
 81         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
 82         this.innerHTML=''
 83         let input = this.children[0];
 84         input.value = str;
 85         input.select();
 86         //input失去焦点后变回span
 87         input.onblur = function(){
 88             this.parentNode.innerHTML= this.value;
 89         }
 90         //按回车也能
 91         input.onkeyup = function(e){
 92             if(e.keyCode == 13){
 93                  this.blur();//获得焦点
 94             }
 95            
 96         }
 97         
 98     }
 99 }
100  new Tab('#tab');
101 // tab.init();

     

     

    你可能感兴趣的:(原生JavaScript写出Tabs标签页)

    • 【前端】jQuery数组合并去重方法总结
      在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
    • 深入了解 Vim 编辑器：从入门到精通 誰能久伴不乏 编辑器vimlinux
      文章目录深入了解Vim编辑器：从入门到精通一、Vim的三个基本模式1.普通模式（NormalMode）2.插入模式（InsertMode）3.命令模式（CommandMode）二、常用快捷键光标移动删除操作复制和粘贴撤销和重做三、文件操作与搜索文件操作搜索文本替换文本四、Vim的进阶功能多文件编辑分屏功能标签页查看帮助五、总结深入了解Vim编辑器：从入门到精通Vim是一个强大的文本编辑器，广泛应用
    • Android 图像处理 - Bitmap 图像处理观察记录（基本图像复制、带目录创建的图像复制、字节流处理的图像复制、并发图像复制、单线程池顺序图像复制）
      Bitmap图像处理观察记录1、基本图像复制从应用内部存储目录读取test.png使用BitmapFactory解码为Bitmap对象将Bitmap重新压缩保存为newTest.png操作成功，compress返回trueFilefile=newFile(getFilesDir(),"test.png");StringabsolutePath=file.getAbsolutePath();Bitm
    • 若依框架（路由跳转，如何动态修改tabs页的title ） 5335ld vue.jsjavascript前端
      //store/modules/tagsView.js页面中添加constmutations={//动态改变tab页签EDIT_VISITED_VIEWS:(state,view)=>{for(varIndexinstate.visitedViews){console.log(state.visitedViews[Index].path)if(state.visitedViews[Index].p
    • Go语言中defer语句的含义，它使用的场景，写出的示例。 小高Baby@ golang开发语言后端
      Go语言的defer语句用于延迟执行某一个函数或方法调用，直到包含它的函数执行完毕（无论正常返回还是发生异常）。它的应用场景一般在：资源释放，错误处理，日志记录packagemainimport("fmt""os")funcmain(){file,err:=os.Open("example.txt")iferr!=nil{fmt.Println("文件打开失败:",err)return}//延迟关
    • C#集合：从基础到进阶的全面解析 阿蒙Armon C#继续学习c#windowslinux
      C#集合：从基础到进阶的全面解析在C#编程中，集合是处理数据集合的核心工具。无论是存储一组对象、实现缓存机制，还是处理复杂的数据结构，都离不开集合的灵活运用。本文将全面深入地探讨C#集合体系，从基础概念到高级技巧，帮助开发者掌握集合的精髓，写出更高效、更优雅的代码。一、集合概述与分类C#集合框架是.NET类库的重要组成部分，它提供了一系列用于存储和操作数据的类和接口。与数组相比，集合具有动态扩容、
    • 最新最全软件测试- Linux面试题
      linux面试题一、请写出如下功能Linux命令：1、三种查看server.log的文件内容linux查看日志文件内容命令tail、cat、tac、head、echo2、编辑start.sh文件，查看文件前10行内容和后10行内容vistart.shhead-n10start.sh前10行tail-n10start.sh后10行3、Linux使用命令可以查找到当前目录下所有txt文件且文件中包含h
    • C语言 | 函数核心机制深度解构：从底层架构到工程化实践 钮祜禄.爱因斯晨 C语言c语言开发语言数据结构
      个人主页-爱因斯晨文章专栏-C语言引言最近偷懒了，迷上了三国和李贺。给大家分享一下最喜欢的一句诗：吾不识青天高黄地厚，唯见月寒日暖来煎人寿。我还不是很理解27岁的李贺，如何写出如此绝笔。正文开始，今天我们来探讨一下关于C语言中的函数部分一、函数的概念：代码的“模块化”基石1.1函数的定义与意义定义：函数是一段可重复使用的代码块，具有输入（参数）、处理逻辑（函数体）**和**输出（返回值）。意义：复
    • 这次是讲解一下条件函数的用法，还有一个简单的示例 言青缘 mysql数据库redis
      我是以普遍的朋友圈做的示例这个可以实现隐藏和显示朋友圈的评论现在我吧具体用法说一下首先要先把页面的大概写出来比如我这个名字我的言论2025-4-30{{is?'展开':'隐藏'}}评论好好好真好太好了然后这是css代码.post-container{width:100%;max-width:600px;margin:0auto;padding:16px;background-color:#fff;
    • MyBatis动态SQL进阶：复杂查询与性能优化实战
      引言在复杂业务场景中，SQL查询往往需要动态拼接条件、复用代码片段，并支持批量操作。MyBatis的动态SQL功能提供了强大的解决方案，本文将深入解析条件分支、片段复用、批量操作优化等核心技巧，助你写出高效、可维护的SQL映射。一、条件分支：choose/when/otherwise标签1.1场景说明假设需要实现一个商品查询接口，支持以下条件组合：按名称模糊查询按价格区间查询按状态精确查询若无条件
    • C++ -01(7.10个人学习记录) 林 c++学习
      C++入口函数：include--告诉头文件将iostream头文件包含在程序当中。因为iostream库包含输入流和输出流相关函数usingnamespacestd;--命名空间的释名，使在程序中不需要写出STD::因为我们需要用到命名空间中的一些工具，如endl、换行intmain()--主函数、入口函数。有且仅有一个。''（）''表示代码在''{}''中执行system("pause");-
    • MCP Inspector 高危远程代码执行漏洞威胁AI开发者（CVE-2025-49596） FreeBuf- MCPAIInspector
      漏洞概述2025年6月，Oligo安全研究团队披露了Anthropic公司ModelContextProtocol（MCP，模型上下文协议）框架核心调试工具MCPInspector中存在的高危远程代码执行（RemoteCodeExecution，RCE）漏洞CVE-2025-49596。该漏洞CVSS评分为9.4分，攻击者仅需通过浏览器标签页即可完全控制开发者的计算机。图片来源：Oligo安全研究
    • Java HashMap的get/put源码深度解析（JDK 1.8）
      JavaHashMap的get/put源码深度解析（JDK1.8）本文基于OpenJDK1.8源码，深入剖析HashMap核心操作的实现机制。理解这些底层原理，能帮助开发者写出更高效的Java代码。一、HashMap核心结构JDK1.8的HashMap采用数组+链表+红黑树的混合存储结构：transientNode[]table;//哈希桶数组//链表节点（基础存储单元）staticclassNo
    • 使用Python调用C++：简单易学的方法 程序员杨弋 Python全栈工程师学习指南pythonc++开发语言
      Python是一种易于学习和理解的编程语言，而C++是强大的编程语言。Python代码可以在很短的时间内编写出来，但如果涉及到大量的计算或需要高性能，则需要使用更快、更高效的编程语言。在这种情况下，Python调用C++是一种常见的方法，因为它可以提供C++的高速性能和Python的便捷性。在本文中，我们将介绍如何使用Python调用C++。首先，需要创建C++函数库（DLL），并确保该库包含需要
    • Linux 定时任务
      实现linux定时任务有:cron、anacron、at等，这里主要介绍cron服务。名词解释：cron是服务名称，crond是后台进程，crontab则是定制好的计划任务表。软件包安装：要使用cron服务，先要安装vixie-cron软件包和crontabs软件包，两个软件包作用如下：vixie-cron软件包是cron的主程序。crontabs软件包是用来安装、卸装、或列举用来驱动cron守护
    • 嵌入式学习-Day6 不想学习\？？! 学习
      c语言day6模拟获取co2，pm2.5的数值，并对co2的浓度，pm2.5的浓度做出划分，详情划分在代码注释首先写写出模拟获取数值的函数，但是由于要对浓度划分，所以先枚举出来等级划分typedefenum{Excellent,//默认0往下递增Good,Average,Poor}QualityLevel;接着写出模拟获取co2函数（在这里用到了static关键字，静态函数能够确保只在co2的c文
    • easypoi中excel注解开关_easypoi: 入,Word模板导出,通过简单的注解和模板 语言(熟悉的表达式语法),完成以前复杂的写法... weixin_39975900
      ===========================EasyPoiExcel和Word简易工具类easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板语言(熟悉的表达式语法),完成以前复杂的写法作者博客：http://blog.afterturn.cn/作者邮箱
    • Java 导出pdf 写出demo 1、需要设置自定义页眉和文字 2、可以插入表格 3、可以插入图片 赵八斤 java
      以下是一个使用iText7库实现PDF导出的Java示例，包含自定义页眉、文字、表格和图片功能：添加Maven依赖com.itextpdfitext7-core7.2.5com.itextpdflayout7.2.5Java示例代码importcom.itextpdf.io.image.ImageDataFactory;importcom.itextpdf.kernel.colors.ColorC
    • Java程序员能菜到什么程度？看完这些代码我裂开了！ 后端java程序员
      家人们，今天咱来唠唠那些让人一言难尽的Java代码。咱搞Java开发，都想写出高效、简洁又好维护的代码，可总有那么些让人怀疑人生的代码出现。下面我就给大伙分享几个真实场景里的“神操作”，结合完整代码，看看这些代码能离谱到啥地步。变量命名之乱，堪比迷宫探险咱先说说变量命名。这就好比给孩子取名字，好名字让人一听就记住，要是乱取，那可就麻烦大了。之前我接手一个电商项目，里面有个计算商品总价的功能。我打开
    • 深入剖析 CSS 属性计算全流程：从层叠冲突到实际渲染值
      CSS看似简单，但浏览器内部处理一个CSS属性值却经历多步变换——从级联冲突、继承、单位转换到布局阶段，最终生成屏幕呈现的具体像素。这一过程对复杂布局、响应式设计、性能调优等尤为关键。本文从规范和实践层面详解每个阶段，帮你写出更可靠、有效率的样式。一、CSS的四步值变换模型浏览器对每条CSS属性遵循如下清晰流程（按CSS2/CSS4定义）：级联值（Cascaded）：整合多个来源（用户、作者、UA
    • 用python写一个hello world、把代码写下来_程序员如何利用Python写出hello world weixin_39699070 用python写一个helloworld把代码写下来
      学习编程语言的第一步，让你的程序对这个世界说一声helloworld!这个程序是编程界经典中的经典，让无数编程恐惧症患者得以顺利写出第一个程序，从而走上大神的不归路！1.新建文本文档先让我们在桌面上新建一个文本文档(helloWorld.txt)2.键入代码现在我们在桌面上已经有了一个空白的文本文档helloWorld.txt，接下来我们打开helloWorld.txt键入下面这这行代码print
    • ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航（含图片选择 expo-image-picker 的使用）
      最终效果技术要点自定义tab需从“expo-router/ui”中导入TabList,Tabs,TabSlot,TabTrigger实现Tabs表示含底栏的页面容器TabList为整个底栏的容器TabSlot渲染tab路由对应的页面TabTrigger触发tab底栏的路由导航name属性对应页面文件href属性对应页面的路由import{Tabs,TabList,TabTrigger,TabSlo
    • 华为OD机试 - 计算某字符出现次数（Python/JS/C/C++ 2025 B卷 100分） 哪 吒 华为odpythonjavascript2025B卷华为OD机试
      2025B卷华为OD机试统一考试题库清单（持续收录中）以及考点说明（Python/JS/C/C++）。专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述写出一个程序
    • 生产级JavaScript深拷贝实现方案 止观止 前端javascript开发语言前端深拷贝
      引言在JavaScript开发中，对象拷贝是常见但易错的操作。本文基于原生JavaScript实现支持循环引用、保留属性描述符、处理所有内置对象的生产级深拷贝函数，解决了Lodash等库的局限性。通过详细技术分析和150行完整代码实现，掌握可靠的深拷贝解决方案。一、为什么需要深拷贝？当JavaScript对象包含嵌套引用时，浅拷贝仅复制第一层引用，深层次对象仍与原对象共享内存地址。这会导致数据污染
    • 华为机试-入门（Python）
      牛客/华为机试/题库/在线编程开发技巧：反向思维、先易后难、先死后活puthon开发文档教程-语法特性/库参考-标准库与内置对象/语言参考-内置函数提示：满足题目输入输出条件，input()中不必有提示语，否则在线编辑器会将提示语算作实际输出，导致结果错误。入门HJ7取近似值题目描述写出一个程序，接受一个正浮点数值，输出该数值的近似整数值。如果小数点后数值大于等于0.5,向上取整；小于0.5，则向
    • 蓝桥杯2023国赛-01游戏 weixin_66009678 蓝桥杯游戏深度优先
      本题的dfs还是比较复杂的，需要兼顾的条件比较多。这一题是我看了其他人的题才写出来的，菜菜捏，哈哈哈哈哈！！！然后这一题如何确保行之前不相同，是通过二进制来的，具体的在代码中给出了详解。直接上代码：//https://www.lanqiao.cn/problems/17100/learning/?page=1&first_category_id=1&sort=students_count&tags
    • Day 16: 列表推导式与生成器表达式：优雅的代码捷径 杨小扩 python
      1.引言各位老朋友，我是阿扩。在过去的编程旅程中，我们经常需要基于一个已有的数据集合，来创建一个新的集合。比如，给你一个数字列表，让你计算出每个数字的平方，组成一个新列表。按照我们已经学过的知识，你会怎么做？你可能会很自然地写出这样的“三部曲”：先准备一个空荡荡的“篮子”（一个新的空列表）。然后，像一个勤劳的工人，一个一个地从旧列表中取出数字（for循环）。对每个数字进行加工（计算平方），然后把加
    • SLF4J深度解析：Java日志世界的“唯一标准” 沉浸式炼丹 java开发语言log4jSLF4J
      SLF4J——Java生态系统中极其重要的组件，它不仅仅是一个日志工具，更体现了一种面向接口编程和“解耦合”的优雅设计思想。理解了SLF4J，你不仅能写出更专业的日志代码，更能加深对软件设计原则的理解。引子：日志框架的“战国时代”在SLF4J出现之前，Java的日志领域一片混乱，群雄并起，如同一个“战国时代”：JUL(java.util.logging):JDK自带的“亲儿子”，但功能简陋，配置复
    • 【华为od刷题（C++）】HJ33 整数与IP地址间的转换 m0_64866459 华为odc++链表
      我的代码：#include//这个头文件提供了输入输出流的功能，使得我们能够使用cin和cout来进行输入输出usingnamespacestd;//可以直接使用标准命名空间std中的功能//比如cout和cin，而不需要每次都写出std::intmain(){longlonginta,b,c,d;//a,b,c,d：这四个变量用来存储IP地址的四个部分//分别代表IP地址中的四个字节longlo
    • 火狐浏览器如何设置：在任务栏中的搜索栏点击搜索的箭头后，网页在新标签打开 wh3933 edge浏览器c4前端
      要在火狐浏览器中设置搜索结果在新标签页中打开，请按照以下步骤操作：打开火狐浏览器。在地址栏中输入about:config并按下回车键。可能会出现一个警告页面，点击“接受风险并继续”。在搜索栏中输入browser.search.openintab。找到browser.search.openintab这一项，双击它将值更改为true。
    • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
       这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
    • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
        1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
    • [航天与宇宙]为什么发射和回收航天器有档期 comsci
             地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
    • linux下批量替换文件内容 商人shang linux替换
      1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
    • 网页在线天气预报 oloz 天气预报
      网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
    • SpringMVC和Struts2比较 杨白白 springMVC
      1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
    • refuse copy, lazy girl! 小桔子 copy
             妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
    • apache与php整合 aichenglong php apache web
      一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
    • Maven常用内置变量 AILIKES maven
      Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
    • java的类和对象 百合不是茶 JAVA面向对象 类 对象
      java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
    • JS控制页面输入框为只读 bijian1013 JavaScript
      在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
    • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
              对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
    • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
      常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
    • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
      1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
    • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
      nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
    • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
      随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
    • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
      参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
    • 数据库连接池的工作原理 chicony 数据库连接池
             随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
    • java 关键字 CrazyMizzz java
      关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
    • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
      Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
    • 单态设计模式 dcj3sjt126com 设计模式
        单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
    • svn locked dcj3sjt126com Lock
      post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
    • ARM寄存器学习 e200702084 数据结构C++cC#F#
      无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
    • 常用编码资料 gengzg 编码
      List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
    • 进程 vs. 线程 hongtoushizi 线程linux进程
      我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
    • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
      一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
    • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
           字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
    • 枚举类型的单例模式 zhb8015 单例模式
      E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
    • Kafka+Storm+HDFS ssydxa219 storm
      cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
    • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
      System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他