u012848631
u012848631

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果

使用之前学过的综合知识，实现一个新闻门户网站上的常见选项卡效果：

[前端] html+css+javascript 实现选项卡切换效果_第1张图片

文字素材:
房产：
    275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房
家居:
     40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计
二手房：
     通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万

先分析基本思路。首先编写HTML，然后再加载样式，最后用JS修改相应的DOM，达到更改选项卡和内容的目的。

一、HTML页面布局

HTML显示的是所有与文字有关的信息，所以在这个页面中与文字有关的信息为上面选项卡的三个标题，以及选项卡的内容。
于是决定标题使用<ul> <li>布局，内容使用<div>布局。编写代码如下：

现在展示出来的样式是这样的：

[前端] html+css+javascript 实现选项卡切换效果_第2张图片

CSS样式

要制作成上图所示的选项卡样式，几个地方需要注意：
1、整个选项卡的样式设置
2、选项卡标题的样式设置
3、选项卡内容的样式设置
4、只能显示一个选项卡的内容，其他选项卡内容隐藏。

写完以后，效果就出来啦。

[前端] html+css+javascript 实现选项卡切换效果_第3张图片

JavaScript实现选项卡切换

1、首先需要获取选项卡标题和选项卡内容
2、选项卡内容有三个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。
3、通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 选项卡</title>
    <style type="text/css"> /* CSS样式制作 */ *{padding:0px; margin:0px;} a{ text-decoration:none; color:black;} a:hover{text-decoration:none; color:#336699;} #tab{width:270px; padding:5px;height:150px;margin:20px;} #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;} #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;} #tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;} #tab div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;} .hide{display:none;} </style>

    <script type="text/javascript"> // JS实现选项卡切换 window.onload = function(){ var myTab = document.getElementById("tab"); //整个div var myUl = myTab.getElementsByTagName("ul")[0];//一个节点 var myLi = myUl.getElementsByTagName("li"); //数组 var myDiv = myTab.getElementsByTagName("div"); //数组 for(var i = 0; i<myLi.length;i++){ myLi[i].index = i; myLi[i].onclick = function(){ for(var j = 0; j < myLi.length; j++){ myLi[j].className="off"; myDiv[j].className = "hide"; } this.className = "on"; myDiv[this.index].className = "show"; } } } </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id = "tab">
        <ul>
        <li class="off">房产</li>
        <li class="on">家居</li>
        <li class="off">二手房</li>
        </ul>
    <div id="firstPage" class="hide">
            <a href = "#">275万购昌平邻铁三居 总价20万买一居</a><br/>
            <a href = "#">200万内购五环三居 140万安家东三环</a><br/>
            <a href = "#">北京首现零首付楼盘 53万购东5环50平</a><br/>
            <a href = "#">京楼盘直降5000 中信府 公园楼王现房</a><br/>
    </div>
    <div id="secondPage" class="show">
            <a href = "#">40平出租屋大改造 美少女的混搭小窝</a><br/>
            <a href = "#">经典清新简欧爱家 90平老房焕发新生</a><br/>
            <a href = "#">新中式的酷色温情 66平撞色活泼家居</a><br/>
            <a href = "#">瓷砖就像选好老婆 卫生间烟道的设计</a><br/>
    </div>
    <div id="thirdPage" class = "hide">
            <a href = "#">通州豪华3居260万 二环稀缺2居250w甩</a><br/>
            <a href = "#">西3环通透2居290万 130万2居限量抢购</a><br/>
            <a href = "#">黄城根小学学区仅260万 121平70万抛!</a><br/>
            <a href = "#">独家别墅280万 苏州桥2居优惠价248万</a><br/>
    </div>
</div>

</body>
</html>

你可能感兴趣的:([前端] html+css+javascript 实现选项卡切换效果)

  • element ui Table组件内容自适应的情况下实现表头相对页面固定 木有是我 jshtmlvuecssjs
    一、elementuiTable只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。此时有一个弊端，如果页面布局内容较多，会出现两个滚动条，一个table的一个页面的，我们的需求是页面高度随着数据数量而自适应撑开，而不是固定table视窗的高度二、效果图对比如下：三、实现步骤1、首先监听页面滚动事件、因为滚动事件触发太过频繁我就带了500毫秒的节流mou
  • Java IO模型：BIO、NIO、AIO讲解 我心向阳iu #Java进阶Java面试知识点精讲javajvmlinux
    文章目录IO首先：什么是IO？为什么要改进IO？BIO、NIO、AIOBIONIONIO实现原理Channel(通道)：Buffer(缓冲区)：Selector(选择器)：AIOBIO、NIO、AIO比较NIO和BIO的比较怎么区别NIO与AIOBIO、NIO、AIO区别举例说明BIO、NIO、AIO适用场景分析:BIO、NIO、AIO代码实战BIO、NIO、AIO相关问题思考：怎么理解IO是面向
  • Element-ui el-tree 父节点不显示复选框 子节点显示复选框 鱼一直下m Js前端
    需求：父节点不显示复选框子节点显示复选框一.父节点不显示复选框子节点显示复选框(如图)二.改后效果(如图)三.上代码(如图)添加css样式.el-tree.el-tree-node.is-leaf+.el-checkbox.el-che
  • Element table 表头吸顶效果（适用于表头无fixed属性使用） 阳光的男夹克 Vue2javascript开发语言ecmascript
    在main.js自定义sticky指令Vue.directive('sticky',{//当被绑定的元素插入到DOM中时……inserted(el,binding){//获取表格constthead=el.children[1]consttbody=el.children[2]//获取滚动元素constscrollParent=document.querySelector(binding.valu
  • 企业数字化运维运营体系规划设计方案PPT 公众号：优享智库 数字化转型数据治理主数据数据仓库运维大数据
    这份文件是关于企业数字化运维运营体系规划设计的综合解决方案，主要围绕构建高效、安全、稳定和集约的运维运营体系展开。以下是文件的核心要点总结：设计原则与目标：设计原则：包括自主可控、适配自身管理体系、稳快结合。强调不依赖厂商，通过体系变革实现统一运营运维，以及平衡创新与稳定性。目标：围绕“安全、稳定、高效、集约”建设运维运营体系，支撑高效警务运行。运维运营体系架构：强调构建“标准化、自助化、可视化、
  • 通过python实现发送钉钉个人工作通知 白白不白zab pyhtonpython钉钉开发语言
    一、钉钉官方开放文档https://open.dingtalk.com/document/isvapp/before-you-start在开发前需要看一遍官方开放文档的相关内容，来避免一些奇奇怪怪的问题出现，比如新旧版接口域名变更，请求方式不同、调用频率限制、是否开放对应接口权限、白名单等等。二、开发前准备首先开发使用的账号需要有钉钉管理员权限在钉钉后台自建应用获取应用AGENT_ID,APP_K
  • vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇) weixin_39562579 vue前端显示图片加tokenvue本地存储vue编辑页面和新增
    完整项目地址：vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin前言拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功
  • pex无人守护安装linux系统脚本 weixin_33800463
    linux系统安装大体分为两个阶段1，anaconda阶段（anaconda程序借助linux内核和initrd文件实现），也称配置阶段在这个阶段是安装配置阶段，配置语言，键盘，等信息。同时boot提示符下能够向内核传递参数.2,安装阶段.安装前脚本配置安装软件包阶段安装后脚本配置...........................................................
  • Vite + Vue3 + TS项目配置前置路由守卫 洛*璃 Vue.jsvue.js前端javascriptVue-RouterPiniatypescript
    在现代前端开发中，使用Vue3和TypeScript的组合是一种流行且高效的开发方式。Vite是一个极速的构建工具，可以显著提升开发体验。本文博主将指导你如何在Vite+Vue3+TypeScript项目中配置前置路由守卫（NavigationGuards）。前置条件在开始配置项目前置路由守卫前，博主希望你能够先达成以下前置条件：1.完成Vue3前端项目搭建:Vite创建Vue3+TS项目2.引入
  • python程序发钉钉消息 乌11111 python
    参考：使用python通过接口方式发送钉钉消息分两步：1.在钉钉群---智能群助手里添加机器人，拿到webhook链接，设置关键词。2.写python代码，用requests请求接口的方式。参考代码和实现结果如下。#python发钉钉消息importjson,requestsdefsendDing(msg):dingding_url='https://oapi.dingtalk.com/robot
  • Python支持向量机（SVM）算法：面向对象的实现与案例详解 闲人编程 进阶算法案例支持向量机算法python深度学习数据分析
    目录Python支持向量机（SVM）算法：面向对象的实现与案例详解引言一、支持向量机算法概述1.1支持向量机的基本思想1.2SVM的分类问题1.3SVM的优化目标二、面向对象的SVM实现2.1类的设计2.2Python代码实现2.3代码详解三、案例分析3.1案例一：鸢尾花分类问题描述数据准备模型训练与预测输出结果3.2案例二：手写数字识别问题描述数据准备模型训练与预测输出结果四、SVM的优化与核方
  • 初识 内嵌iframe 家里有只小肥猫 iframevue前端
    iframe的基本介绍与使用介绍iframe（内嵌框架）是HTML中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。基础使用标签的基本用法如下：例如：属性除了src属性，还可以使用其他属性来设置iframe的行为和样式，如allow、allowfullscreen、class、frame
  • el-table表格单行表头 Is无糖 vue.js前端javascript
    最近开发项目遇到一个订单列表展示的需要在每一行表头上进行订单的某些操作和数据展示如图：表格一般我都是使用elementui的el-table正常使用肯定是不能满足这个效果想了想也是有点思绪便做了一个demo记录一下效果图：父组件代码:importchilTabelfrom'./components/chilTable.vue';exportdefault{data(){return{tableDa
  • Vue2.0+ElementUI实现查询条件展开和收起功能组件 热忱1128 elementui前端javascript
    一、需求el-form如果查询条件过多，影响页面的展示效果。查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能二、效果图三、代码示例封装查询条件表单组件SearchButton.vue查询重置{{word}}exportdefault{props:{showAll:{type:Bo
  • JHipster入门 - 生成单体架构的应用 yorkwu1977 软件工程架构
    JHipster入门-生成单体架构的应用目标准备工作生成基础功能输入指令开始问答环节问答环节结束，开始自动生成基础功能代码生成业务功能输入指令开始问答环节问答环节结束，开始自动生成业务功能代码调试启动启动后端服务启动前端服务访问前端页面打包启动构建启动访问前端页面关于数据库交给JHipster自己启动目标30分钟内生成一个开箱即用的单体架构应用。生成SpringBoot后端代码和Vue前端代码。基
  • 深度ResUnet与ResUnet++：新一代的语义分割神器 倪澄莹George
    深度ResUnet与ResUnet++：新一代的语义分割神器去发现同类优质开源项目:https://gitcode.com/在这个数据驱动的时代，深度学习模型在图像处理领域展现出了强大的潜力，尤其是在语义分割任务中。今天，我们向您推荐一个基于PyTorch实现的开源项目——DeepResUnet和ResUnet++。这两个模型源自于学术界的最新研究，旨在提高图像分割的准确性和效率。项目介绍这个开源
  • Arduino入门：按钮升级（按一下按钮，LED亮，再按一下，LED熄灭） Dr.勿忘 arduinoarduino
    按钮升级（按一下按钮，LED亮，再按一下，LED熄灭）一、成果展示二、实现方法与解析首先，让我们按图连接电路：代码如下intbutton=2;intled=13;booleanchange=false;//通过按钮来改变change的值voidsetup(){pinMode(button,INPUT_PULLUP);pinMode(led,OUTPUT);}voidloop(){while(dig
  • 运维平台的建设思考 congbao6525 运维
    自己最近也在琢磨如何搭建出一个完善有效的运维平台，当然这个工作不是一朝一夕就能完成，前行的道路上肯定会有各种各样的困难和牵绊，但是自己还是能够学以致用，把一些重复性，繁琐性的工作都能解放出来，能够更加关注于更高的一个层级来看待整个系统。我把搭建运维平台的过程分成了5个阶段，当然纯粹是个人之见，难免有不足和改进之处，欢迎交流。第一个阶段，不同的人积累了一些的经验，可能会有针对一些功能的实现，比如脚本
  • 从零到一：低代码平台的核心技术解析 低代码
    在数字化转型的浪潮中，低代码平台正逐渐成为企业加速应用开发、提升效率的重要工具。它打破了传统开发模式的束缚，让更多非专业开发者也能参与到应用构建中来。今天，我们就来深入剖析低代码平台背后的核心技术，看看它是如何实现高效开发的。可视化设计引擎低代码平台的显著特征之一就是可视化设计。可视化设计引擎就像是一个图形化的工作区，开发者通过简单的拖拽、配置操作，就能搭建出应用的界面和流程。它提供了丰富的组件库
  • 【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree 小白Rachel 前端工作日记随笔Vue项目实战elementUI组件优化vue.jsuielementuiel-tree组织机构树
    文章资源连接（如果需要付费，联系我修改即可）：https://download.csdn.net/download/Sabrina_cc/87607289好吧吐槽一下，公司决定之后的技术栈都是vue了，我又从React转战回来了。干巴爹好的生活方式，是和一群志同道合的人，一起奔跑在理想的路上！回头有一路的故事，低头有坚定的脚步，抬头有清晰的远方。首先了解Element-UI中定义的基础Tree树组
  • Python实现聊天机器人（基于ChatterBot） Lemonlittle python开发语言
    废话不多说，直接上正题。使用Python中的ChatterBot和Spacy库编写的简单聊天机器人：首先，需要安装ChatterBot和Spacy库，可以使用以下命令：复制插入pipinstallchatterbotpipinstallspacypython-mspacydownloaden_core_web_sm复制插入接下来，我们需要导入所需的库：python复制插入fromchatterbo
  • 为AI聊天工具添加一个知识系统 之70 详细设计 之11 维度运动控制的应用：上下文受控的自然语言 一水鉴天 软件智能人工语言智能制造数据库
    本文要点要点前面我们讨论了“维度”及其运动控制原理以及维度控制如何在中台微服务架构中撑起了“架构师”角色的一片天。下面我们从“维度”运动控制的一个典型应用场景：受控的自然语言”开始讨论。拼块文字型风格:维度运动控制下的受控自然语言演示了支持/支撑/支援的三因式分解（三化：化仪/化解/化法）效果。C单独支撑（独立支撑）的分组交换(激活：前/后。维度=0--静止“方”)，A三顶支持（共同支持）的分段替
  • ASP.NET Core MVC AAA猪饲料批发李师傅 .NETmvc.netcorec#
    项目结构控制器由Controller类实现，视图一般是扩展名为cshtml的文件，而模型则是只有属性的普通C#类。控制器类的名字一般以Controller结尾，并且被放到Controllers文件夹下。控制器的名字为控制器的类名去掉Controller。视图一般被放到Views文件夹下的控制器名字的文件夹下。视图→浏览器端提交的请求→模型→控制器→处理→模型→视图。渲染：Render。案例演示一个
  • elementUI Table组件实现表头吸顶效果 热忱1128 elementuivue.js前端
    需求描述当table内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶开始编码环境：vue2.6+、elementUIstep1：给el-table__header-wrapper加上样式//style/sticky-table-header.scss.el-table[is-sticky]{overflow:initial;--sticky
  • Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制 匹马夕阳 VUE技术集锦vue.js前端javascript
    在Vue3中，导航守卫（NavigationGuard）用于拦截路由的变化，可以在用户访问页面前进行检查。结合Axios进行token认证机制时，我们可以通过导航守卫在路由跳转时，检查用户的认证状态，确保用户有有效的token进行认证。下面，我将通过具体代码示例，逐步讲解如何实现这一功能：文章目录1.安装必要的依赖2.创建`axios`实例3.在`router.js`中使用导航守卫4.处理登录与登
  • 从入门到精通：HttpClient深度剖析与实战指南 步、步、为营 c#.netcoreasp.net微服务
    一、引言1.1背景引入在当今数字化时代，网络编程已成为软件开发中不可或缺的一部分。而HTTP通信作为网络编程的核心，承担着客户端与服务器之间数据传输的重任。无论是Web应用、移动应用，还是分布式系统，HTTP协议都扮演着关键角色，它使得不同设备、不同平台之间能够高效地进行数据交互。在Java开发领域，为了实现HTTP通信，我们有众多工具可供选择，其中ApacheHttpClient脱颖而出，成为开
  • 人形机器人的组成原理、相关技术和行业应用 weixin_30777913 机器人
    人形机器人的部件和工作原理人形机器人的部件通常包括机身、关节、传感器、驱动器、控制器等。其工作原理是通过传感器收集环境信息，控制器根据预设的算法和程序生成动作指令，驱动器驱动关节运动，从而实现机器人的各种动作。人形机器人主要由以下几个部件组成：伺服电机：在自动控制系统中，伺服电机作为执行元件，将接收到的电信号转换为电动机轴上的角位移或角速度输出。在人形机器人中，伺服电机是驱动各个关节运动的核心部件
  • Flask python 开发篇：蓝图的使用 ignativs amor Pythonflaskpythonflask后端
    蓝图引言一、为什么使用蓝图？二、蓝图的概念三、创建蓝图四、注册蓝图五、分享我的creat_app方法六、写在最后引言falsk是个轻量级的框架，核心实现简单，但同事可以让开发人员自由的扩展功能。开发中，使用模块导入的方式。一、为什么使用蓝图？将一个应用程序分解为一组蓝图。这对于较大的应用程序是理想的；一个项目可以实例化一个应用程序对象，初始化多个扩展，并注册许多蓝图。-在URL前缀和（或）子域的应
  • Java实现音频转文本（语音识别） Tech Synapse java音视频语音识别
    在Java中实现音频转文本（也称为语音识别或ASR）通常涉及使用专门的语音识别服务，如GoogleCloudSpeech-to-Text、IBMWatsonSpeechtoText、AmazonTranscribe、MicrosoftAzureSpeechServices，或者一些开源库如CMUSphinx。由于直接使用开源库或云服务的API进行完整演示可能涉及复杂的设置和依赖管理，这里将提供一个
  • 【Blazor】使用C#替代Java编写代码的前端开发框架 雕技小虫 系统开发WindowsServerBlazor.NET前端开发框架webassembly
    Blazor是微软于2019年下半年开始陆续全新推出的前端开发框架。优势无需插件，基于Web标准可与JavaScript交互利用.NETCore优势Blazor有两个版本：Server||WebAssemblyBlazorServer可以理解为在服务器上运行的Blazor，客户端与服务器间通过SignalR实进通信，2019年09月正式发布。BlazorWebAssembly2020年05月正式发
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他