童凌

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

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

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

文字素材:
房产：
    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显示的是所有与文字有关的信息，所以在这个页面中与文字有关的信息为上面选项卡的三个标题，以及选项卡的内容。
于是决定标题使用

布局，内容使用

布局。编写代码如下：

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

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

CSS样式

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

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

JavaScript实现选项卡切换

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

完整代码：


<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; ifunction(){
            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>

<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 图像与多媒体元素：拓展学习边界的进度记录（一）计算机毕设定制辅导-无忧学长 #HTML html 学习 php
开篇：学习启程在前端开发的广袤领域中，HTML作为构建网页的基石，其重要性不言而喻。而HTML图像与多媒体元素，就像是为这座基石添上了绚丽的色彩与灵动的音符，赋予网页更加丰富的表现力和交互性。作为一名热衷于探索前端技术的博主，我深知掌握这些元素对于提升网页开发能力的关键作用。于是，我踏上了深入学习HTML图像与多媒体元素的征程，并决定将学习过程中的点滴记录下来，与大家一同分享。希望通过这篇学习进度
一个后端工程师对前端云 Vercel 的体验和探索程序员
今天小猿姐特邀咱们资深的程序猿为大家带来产品的体验报告。Vercel概述Vercel是一个为前端开发者设计的一体化平台（前端云），可以帮助开发者快速地将网站和应用程序部署到各种环境中，并且提供了一个灵活、可扩展和安全的平台，非常适合开发者在不同平台和环境中进行开发和部署。Vercel的主要特点包括：通过自动配置构建设置和提供详细的构建日志，简化了部署管理过程。借助集成的CI/CD功能，开发者可以预
《今日AI-人工智能-编程日报》-源自2025年3月19日小亦编辑部每日AI-人工智能-编程日报人工智能
1.豆包AI编程功能迎来三项重磅升级豆包平台今日宣布其AI编程功能迎来三项重要升级，包括：HTML实时预览：支持用户在编写HTML代码时实时查看网页效果，显著提升前端开发效率，尤其适用于小游戏和网页制作。Python代码直接运行与一键修复：用户可直接运行Python代码，并在出错时一键修复，极大降低了编程门槛，提升了开发效率。生成完整项目：新增生成完整项目的功能，帮助用户快速创建应用程序，缩短开发
Vue.js 中的 Memoization：提升性能的缓存技术 vvilkim vue vue.js 前端 javascript
在现代前端开发中，性能优化是一个永恒的话题。随着应用规模的增大，复杂的计算和频繁的函数调用可能会导致性能瓶颈。Vue.js作为一个流行的前端框架，提供了多种优化手段，其中memoization（记忆化）就是一种非常有效的技术。本文将详细介绍Vue.js中的memoization，以及如何利用它来提升应用性能。什么是Memoization？Memoization是一种优化技术，通过缓存函数的结果来避
Vue.js 性能优化：虚拟 DOM 与虚拟滚动 vvilkim vue vue.js 前端 javascript
在现代前端开发中，性能优化是一个永恒的话题。Vue.js作为一款流行的前端框架，提供了许多强大的工具和技术来提升应用的性能。其中，虚拟DOM和虚拟滚动是两个非常重要的概念。本文将深入探讨它们的原理、优势以及如何在Vue.js中使用它们来优化性能。什么是虚拟DOM？虚拟DOM（VirtualDOM）是Vue.js用于提升性能的核心技术之一。它是一个轻量级的JavaScript对象树，用于表示真实DO
软件工程（数据字典） Rain:) 软件工程数据分析软件开发
数据字典数据字典是关于数据的信息的集合，也就是对数据流图中包含的所有元素的定义的集合。任何字典最主要的用这都是供人查阅对不了解的条目的解释，数据字典的作用也正是在软件分析和设计的过程中给人提供关于数据的描述信息。数据流图和数据字典共同构成系统的逻辑模型，没有数据字典，数据流图就不严格，然而没有数据流图，数据字典也难于发挥作用。只有数据流图和对数据流图中每个元素的精确定义放在一起，才能共同构成系统的
[软件工程] 数据字典枪枪枪 Software Engineering
======================================================================= 学习过程中很容易忘记绘图的符号、图的定义，为避免重新翻书查定义，还是整理整理放博客上，方便查看吧。基本上都是书上的内容，在这里集合一下。参考资料：软件工程（张海藩、吕云翔）=========================================
软件工程：数据字典愚戏师软件工程软件工程数据库
一、数据字典的核心作用定位：数据字典是数据流图（DFD）的补充说明文档，与DFD共同构成系统的逻辑模型。核心价值：消除二义性：明确数据流、存储、元素的定义，避免理解偏差。设计依据：为数据库设计、代码开发提供数据规范。团队协作：作为开发团队的共享词汇表，确保术语一致性。二、数据字典的四大组成要素1.数据流（DataFlow）定义：数据在系统中的流动路径。描述内容：来源与去向：起点（外部实体/处理）、
一个比Fiddler/Charles更好用的免费抓包神器金丝猴也是猿 http udp https websocket 网络安全网络协议 tcp/ip
Proxyman与Sniffmaster：抓包工具的双剑合璧在当今的网络开发与调试中，抓包工具是不可或缺的利器。无论是前端开发者、后端工程师，还是安全研究人员，都需要通过抓包工具来分析网络请求、调试接口、排查问题。今天，我们将介绍两款强大的抓包工具：Proxyman和Sniffmaster，它们各自拥有独特的功能，能够帮助你在不同的场景下高效完成工作。Proxyman简介Slogan：只是简单地点
耦合与解耦：软件工程中的核心矛盾与破局之道以恒1 软件工程
耦合与解耦：软件工程中的核心矛盾与破局之道在软件开发领域，耦合与解耦是贯穿始终的核心矛盾。它们如同硬币的两面，既相互对立又紧密依存。本文将从概念解析、类型分类、解耦策略到实际应用，全面剖析这对矛盾体的本质与破局之道。一、耦合的本质：依赖关系的多维透视耦合（Coupling）指软件系统中不同模块、组件或服务之间的相互依赖程度。这种依赖可能表现为数据传递、控制流交互或资源共享。根据耦合强度，可分为七种
JavaScript 中的性能优化：从基础到高级技巧 lina_mua 深入 javascript 性能优化开发语言
1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优
浏览器工作原理深度解析（阶段一）：从 URL 到页面渲染的完整流程码农的时光故事 javascript 前端
一、浏览器工作流程概述作为前端开发者，我们每天都在与浏览器打交道，但多数人对其内部工作机制却知之甚少。实际上，浏览器的核心功能就是将用户输入的URL转换为可视化的网页。这一过程大致分为六个关键步骤：网络请求：通过HTTP/HTTPS协议获取页面资源构建DOM树：解析HTML代码生成文档对象模型样式计算：解析CSS规则并应用到对应元素布局渲染：计算元素位置和尺寸生成渲染树合成优化：将渲染层合并为位图
Web Component 教程（六）：基于 Stencil 脚手架开发 Web Component 乐闻x Web Component 学习记录前端 web component stencli
前言在现代前端开发中，WebComponent是一种逐渐受到关注的技术，它允许我们创建可以在任何框架或库（如React,Angular,Vue等）中使用的可重用组件。而Stencil是一个强大的开发工具，它帮助我们轻松构建这些WebComponent，使开发过程更高效、更简洁。那么，究竟如何使用Stencil来开发WebComponent呢？今天，我们就来探索这一主题，从安装和设置，到创建和使用组
Angular Material表格的动态列宽设置 t0_54program 编程问题解决手册 angular.js 前端 javascript 个人开发
在前端开发中，AngularMaterial表格（mat-table）是非常流行的组件之一。它提供了丰富的功能，如排序、分页和过滤等。然而，有时我们需要动态调整表格列的宽度，以适应不同的数据和用户需求。本文将介绍如何在TypeScript中获取mat-table的列宽，并据此设置相应的过滤器宽度。问题描述在使用AngularMaterial表格时，如何获取每个列的宽度？例如，我们希望为每一列设置一
需求分析与问题定义原理与代码实战案例讲解 AI天才研究院 DeepSeek R1 &大数据AI人工智能大模型 AI大模型企业级应用开发实战大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
需求分析与问题定义原理与代码实战案例讲解作者：禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming1.背景介绍1.1问题的由来在软件工程领域，需求分析与问题定义是至关重要的环节。它们决定了软件项目的成功与否，直接影响着软件的质量、成本和交付时间。随着软件项目的复杂性和规模日益增加，对需求分析与问题定义的要求也越来越高。本文将深入探讨需求分析与问题定义的原理，并
HTML 教程：从零开始掌握常用语法 LoveYa! 前端 html 前端笔记学习
免费无广纯净版微信小程序测mbti很有趣，不需要任何授权，也不需要登录，直接就是测，几分钟了解自己的人格mbti，快来试试吧。可以微信直接搜索小程序名“一秒MBTI”HTML教程：从零开始掌握常用语法欢迎来到HTML的世界！HTML（HyperTextMarkupLanguage，超文本标记语言）是网页开发的基石，它负责定义网页的结构和内容。无论你是想成为一名前端开发者，还是仅仅想了解网页背后的魔
【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境 Mr.小朱同学 Web前端笔记前端笔记 vue.js Vue3 Vite 搭建项目环境
这篇文章，主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。目录一、搭建项目环境1.1、前提条件1.2、开始搭建1.3、下载依赖1.4、启动工程一、搭建项目环境目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。1.1、前提条件在创建Vu
Postman 从入门到精通的详细图文教程指南清尘沐歌 postman 测试工具
API已经成为连接不同系统和服务的重要桥梁，无论你是前端开发者、后端工程师还是测试人员，掌握API的开发和测试技能都是非常重要的。Postman是一个广受欢迎的API开发工具，它不仅能够帮助你轻松发送HTTP请求，还提供了强大的测试、调试和协作功能。本系列教程旨在帮助你从零开始，逐步掌握Postman的各项功能，从基础的请求发送到高级的自动化测试和团队协作。无论你是初学者还是有一定经验的开发者，都
MDX语言的软件工程苏墨瀚包罗万象 golang 开发语言后端
MDX语言的软件工程引言在现代软件开发中，技术的进步不断推动着开发流程的变化与优化。MDX（MultidimensionalExpressions）语言作为一种用于查询和操作多维数据集的表达式语言，已在数据分析、商业智能等领域得到了广泛应用。本文将探讨MDX语言在软件工程中的应用，包括其基本概念、工作原理、最佳实践以及在数据分析系统中的具体案例。1.MDX语言概述MDX最初由微软开发，通常用于访问
TypeScript模块 vs JavaScript模块：现代化开发的模块化之道念九_ysl typescript 前端 typescript
一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
智慧物流数字管理系统设计案例分析 UI设计开发服务商数据分析数据挖掘
你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一
《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅 JJCTO袁龙前端 react.js 前端框架
文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这
最完整的webpack Dll打包与采坑总结仰望星空的代码 Vue.js踩坑记 vue.js webpack dll打包打包优化
webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），Dl
前端开发：Webpack的使用总结三掌柜666 web前端知识汇总 webpack 前端 javascript
前言在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工
Python前端开发 PITSU 正则表达式 html css3 mysql
Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中
【Vue+TypeScript实战指南：提高代码质量和开发效率】小怪兽9699 typescript vue.js 前端
前言在现代前端开发中，Vue.js是一个非常流行且强大的框架，而TypeScript则是增强代码类型安全性和可维护性的利器。本文将详细介绍如何结合Vue和TypeScript来构建高质量的应用程序。无论你是有一定基础的开发者还是希望进一步提升技能的高手，本文都将为你提供详细的步骤和代码示例。1.环境搭建首先，确保你已经安装了Node.js和npm。然后，全局安装VueCLI：npminstall-
Vue.js的watch监听阿珊和她的猫 vue.js 前端 javascript
前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`watch`选项的基本概念`watch`选项的基本语法`watch
现代前端开发框架对比：React、Vue 和 Svelte 的选择指南 zhyoobo vue.js react.js 前端
引言在当今快速发展的Web开发领域，前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue和Svelte作为当前最受关注的三大框架，各自拥有独特的设计哲学与技术实现。本文将通过5000字的深度解析，从架构设计、开发体验、性能特征到生态系统四个维度进行全方位对比，并针对不同场景提供选型决策框架。无论您是初创团队的技术负责人，还是正在构建企业级应用的架构师，都能在此找到面向2
LORA的魔法棒：在Stable Diffusion中挥洒注意力机制的优化咒语 ?? DTcode7 AI生产力 AI AIGC stable diffusion AI生产力前沿
LORA的魔法棒：在StableDiffusion中挥洒注意力机制的优化咒语??欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞
深入解析：React中的信号组件与细粒度更新
引言在主流的前端开发框架中，无论是React、Vue还是Svelte，核心都是围绕着更高效地进行UI渲染展开的。为了实现高性能，基于DOM总是比较慢这个假设前提，其最核心的要解决的问题有两个：响应式更新细粒度更新为了将响应式更新、细粒度更新优化到极致，各种框架是八仙过海，各显神通。以最流行的React和Vue为例，首先两者均引入了VirtualDOM的概念。Vue的静态模板编译，通过编译时的静态分
knob UI插件使用换个号韩国红果果 JavaScript jsonp knob
图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
Android+Jquery Mobile学习系列(5)-SQLite数据库白糖_ JQuery Mobile
目录导航 SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。我也是第一次接触S
impala-2.1.2-CDH5.3.2 dayutianfei impala
最近在整理impala编译的东西，简单记录几个要点：根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
求二进制数中1的个数周凡杨 java 算法二进制
解法一：对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。 public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
spring中hibernate及事务配置 g21121 Hibernate
hibernate的sessionFactory配置：  <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
log4j.properties 使用 510888780 log4j
log4j.properties 使用一.参数意义说明输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
Spring mvc-jfreeChart柱图（2）布衣凌宇 jfreechart
上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。第一步：导包第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
maven 之 cobertura 简单使用 antlove maven test unit cobertura report
1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
程序的执行顺序百合不是茶 JAVA执行顺序
刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧代码如下; 经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
设置session失效的几种方法 bijian1013 web.xml session失效监听器
在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
java jvm常用命令工具 bijian1013 java jvm
一.概述程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具: &nbs
【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
mysql 操作遇到safe update mode问题 bitray update
我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全. 在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
nginx_perl试用 ronin47 nginx_perl试用
因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
java-63-在字符串中删除特定的字符 bylijinnan java
public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器类可以通过
[宇宙时代]四边形理论与光速飞行 comsci
从四边形理论来推论为什么光子飞船必须获得星光信号才能够进行光速飞行？一组星体组成星座向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说一组频率就代表一个时空的入口那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
ubuntu server下python脚本迁移数据 cywhoyi python Kettle pymysql cx_Oracle ubuntu server
因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql，但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
Ajax正确但是请求不到值解决方案 dashuaifu Ajax async
Ajax正确但是请求不到值解决方案解决方案：1 . async: false , 2. 设置延时执行js里的ajax或者延时后台java方法！！！！！！！例如： $.ajax({ &
windows安装配置php+memcached dcj3sjt126com PHP Install memcache
Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
iOS开发学习路径的一些建议 dcj3sjt126com ios
iOS论坛里有朋友要求回答帖子，帖子的标题是：想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759 下面是我回复的内容：结合自己情况聊下iOS学习建议，
Javascript闭包概念 fanfanlovey JavaScript 闭包
1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述要理解闭包，首先需要理解变量作用域问题内部函数可以饮用外面全局变量 var n=999; 　　functio
yum安装mysql5.6 haisheng mysql
1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 2、yum install mysql 3、yum install mysql-server 4、vi /etc/my.cnf 添加character_set_server=utf8
po/bo/vo/dao/pojo的详介 IT_zhlp80 java BO VO DAO POJO po
JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
java设计模式 kerryg java 设计模式
设计模式的分类：一、设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
[1]CXF3.1整合Spring开发webservice——helloworld篇木头.java spring webservice CXF
Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写））你的健康无疑地，软件开发者是世界上最久坐不动的职业之一。每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
linux打开最大文件数量1,048,576 tianzhihehe c linux
File descriptors are represented by the C int type. Not using a special type is often considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
java语言中PO、VO、DAO、BO、POJO几种对象的解释衞酆夼 java VO BO POJO po
PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象封装业务逻辑的java对象

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他