童凌
童凌

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

  • 布局，内容使用
    布局。编写代码如下：
    [前端] html+css+javascript 实现选项卡切换效果_第2张图片

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

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

    CSS样式

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

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

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

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

    JavaScript实现选项卡切换

    1、首先需要获取选项卡标题和选项卡内容
    2、选项卡内容有三个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。
    3、通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。
    [前端] html+css+javascript 实现选项卡切换效果_第6张图片

    完整代码：

    
<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>

你可能感兴趣的:(————软件工程————,前端开发)

  • 软件工程应试复习（考试折磨版） 愚戏师 软件工程
    针对学校软件工程考试，参考教材《软件工程导论（第6版）》1-8章学习的艺术：不断地尝试，我一定会找到高效用的方法，让学习变成一门艺术，从应试备考中解救出我的时间同胞们。好嘞！既然时间紧迫，咱们就用「闪电战」学习法，把知识点当零食一样快速吞下（但记得消化哦）！上攻略三步速成秘籍(测试版）：应试求生指南！1.开挂第一步：「抓大放小」狙击战！锁定BOSS级考点：翻开目录，用荧光笔把老师敲黑板的内容（PP
  • 前端开发中的最佳实践与技巧 lina_mua javascriptvue.jshtml前端es6node.js
    1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代
  • 前端开发岗模拟面试题套卷A答案及解析（一）技术面部分 向贤 前端开发前端数据库javascript面试
    前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);
  • AI前端革新金融风控：ScriptEcho助力高效开发 wangtaohappy 人工智能前端
    1.引言：金融风控的挑战与前端效率需求在当今快速变化的金融环境中，风险评估和反欺诈已成为金融机构运营的核心。金融风控不仅关乎企业的盈利能力，更直接影响着整个金融体系的稳定。一个强大的风控系统需要能够实时监控、分析并预测潜在的风险，从而保护企业和用户的资产安全。然而，构建和维护这样一套复杂的系统并非易事，尤其是在前端开发方面，面临着诸多挑战。传统的前端开发模式，依赖于人工编写大量的代码，这在快速迭代
  • 星河飞雪网络安全学习笔记-安全见闻1-3 芝士布偶 网络安全
    安全见闻-了解安全知识编程语言日常编程语言C语言：一种通用的、面向过程的编程语言，广泛运用于系统软件呵呵嵌入式开发C++：面向对象的编程语言，常用于游戏开发、高性能计算等领域Java：一种广泛使用的面向对象编程语言、具有跨平台性、应用于企业级应用开发等Python（萌新推荐）：简洁易学，拥有丰富的库，适用于数据分析、人工智能、web开发等Javascript：主要用于网页前端开发，也可用于服务器端
  • 鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • React 中的受控组件与非受控组件：深度剖析与实战应用 银之夏雪丶 react.jsjavascript前端
    一、引言在如今的前端开发里，React可是响当当的角色，是咱搭建用户界面的得力帮手。一碰到表单处理和用户输入交互这些事儿，受控组件和非受控组件就派上大用场了，它们就像是两种不一样的工具，各有各的厉害之处。要是咱能把它们摸透了，知道啥时候用啥，那开发出来的React应用肯定既好用又靠谱，用户体验也差不了。二、受控组件（一）定义咋来的受控组件，简单讲，就是让表单元素的值跟React组件的state绑得
  • JavaScript系列（86）--现代构建工具详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascriptrust开发语言
    JavaScript现代构建工具详解现代前端开发离不开构建工具，它们帮助我们处理模块打包、代码转换、资源优化等任务。让我们深入了解主流的构建工具及其应用。构建工具概述小知识：构建工具主要解决代码转换、文件优化、模块打包、自动刷新、代码分割等问题。主流的构建工具包括webpack、Vite、Rollup等，它们各有特点和适用场景。webpack详解//1.webpack配置classWebpackC
  • 架构演进史 三花学编程 架构架构java微服务
    软件架构是软件工程的基石，它不仅影响着系统的性能、可维护性和可扩展性，也直接关系到开发团队的效率和项目的成功。随着技术的不断发展和业务需求的变化，软件架构经历了多个阶段的演进。本文将详细探讨这些阶段及其背后的驱动因素。1.单体架构时代1.1定义与特点单体架构是指将所有功能模块打包在一个独立的应用程序中。早期的计算机应用程序大多采用这种架构，所有的代码、数据和资源都集中在一个地方。1.2优点简单性：
  • 体系结构风格——《软件工程:实践者的研究方法》第八版 贰叁！ 读书笔记（软件工程）软件工程
    基于计算机系统构造的软件也展示了众多体系结构风格中的一种。每种风格描述一种系统类别，包括：（1)完成系统需要的某种功能的一组构件(例如，数据库、计算模块);（2）能使构件间实现“通信、合作和协调”的一组连接件；（3）定义构件如何集成为系统的约束；（4）语义模型，能使设计者通过分析系统组成成分的已知属性来理解系统的整体性质。体系结构风格就是施加在整个系统设计上的一种变换，目的是为系统的所有构件建立一
  • 前端开发必备:全方位字符串处理工具详解 FinkGO小码 vue.jsjavascripttypescript前端程序人生学习方法webstorm
    前端开发必备：StringUtils全方位字符串处理工具详解引言在前端开发的日常工作中，字符串的处理无处不在。从用户输入的校验、界面文本的展示优化，到数据的格式化与传输，高效且精准地操作字符串是提升应用质量与用户体验的关键环节。今天，我们将深入剖析一款功能强大、涵盖广泛的字符串工具类——StringUtils，它如同一位万能的工匠，为开发者提供了一站式解决各类字符串问题的便捷方案。工具类概述Str
  • AI 赋能前端开发：ScriptEcho 如何结合低代码/无代码平台引领未来 wangtaohappy 人工智能低代码前端
    1.引言前端开发作为用户与应用交互的桥梁，一直面临着效率、复杂性和快速迭代的挑战。随着互联网技术的飞速发展，用户对应用的用户体验要求越来越高，前端开发的任务也变得更加繁重和复杂。与此同时，低代码/无代码平台的兴起为前端开发带来了新的可能性，它们通过可视化界面和预构建组件，大大降低了开发门槛，加速了开发流程。而AI写代码工具的出现，则进一步赋能了前端开发，为解决传统前端开发模式的痛点提供了新的思路。
  • AI写代码工具赋能前端开发：效率提升与身心健康 hzcaituowj 人工智能前端
    在飞速发展的互联网时代，AI前端开发成为炙手可热的领域。然而，高强度的工作、紧迫的交付时间以及技术日新月异的更新迭代，也给开发者带来了巨大的压力，甚至严重影响着他们的身心健康。长时间伏案工作导致的颈椎病、眼疲劳、精神压力大等问题日益突出。本文将探讨如何利用先进的AI写代码工具提升工作效率，从而有效改善AI前端开发人员的身心健康状况。AI前端开发与身心健康：挑战与应对AI前端开发，特别是涉及到复杂交
  • 广州游戏公司4399秋季招聘火热进行中可查询流程 huaxinjiayou java
    新凯来入职体检被卡取消录用面试多起来了byd是真抽象啊，没笔没面直接录取了金蝶第二批组内直招前端开发实习生-最快可当天约面比亚迪两院不卡本2秋招暂时结束，学会和自己和解应届生基本都沦为各公司的免税工具了秋招不要焦虑，机会就在某一瞬间同程一面面试多起来了同程旅行java开发一面凉经byd是真抽象啊，没笔没面直接录取了同程旅行同程旅行一面数字马力（郑州）10/12面经同程一面写面经攒人品-数字马力后端
  • NVM管理多个 Nodejs 版本 牧云流 前端node.jsnvm
    在前端开发过程中，常常需要切换不同版本的NodeJS运行环境，NVM(NodeVersionManager)是一个用于管理多个Node.js版本的工具。卸载以前的Nodejs，并删除node的安装目录安装nvm下载地址安装到D:\Programs\nvm，选择node安装路径D:\Programs\nodejsnvm-v安装指定的版本的nodejsnvminstall版本号nvminstall10
  • ScriptEcho：AI赋能的前端代码生成神器 begei 人工智能前端
    ScriptEcho：AI赋能的前端代码生成神器在前端开发中，如果你总是觉得写代码太费时费力，那么ScriptEcho将成为你的救星。这个AI代码生成平台不仅能帮你省下大量时间，还能让你轻松愉快地写出生产级代码。本文将带你了解ScriptEcho的基本信息、特点，以及如何快速上手。软件简介ScriptEcho是一个专为前端开发者设计的AI代码生成平台，支持Vue、React、uniapp和Flut
  • AI写代码工具赋能前端开发：提升开发者解决问题能力 bd_ming 人工智能前端
    近年来，人工智能（AI）技术在各个领域都取得了显著进展，前端开发领域也不例外。AI的快速发展为前端开发者带来了前所未有的机遇，同时也带来了新的挑战。开发者需要不断学习新的技术和工具，以适应快速变化的开发环境。而AI写代码工具的出现，为开发者提升解决问题的能力提供了强有力的支持。本文将探讨AI前端开发工具如何帮助开发者更高效地解决问题，并以ScriptEcho为例进行说明。……传统的Web前端开发工
  • AI写代码工具赋能前端开发：ScriptEcho 如何激发创新？ 2501_90335205 人工智能前端
    近年来，人工智能技术飞速发展，深刻地改变着各个行业，前端开发领域也不例外。借助AI写代码工具，开发者们能够以前所未有的速度和效率构建复杂的应用程序，从而释放出更多的时间和精力专注于创新。本文将以ScriptEcho为例，深入探讨AI如何赋能前端开发，提升创新能力。……AI赋能前端创新：效率与创意的平衡传统的前端开发流程往往充满了重复性的工作，例如编写大量的样板代码、处理复杂的布局以及调试各种兼容性
  • 前端主流构建工具
    本文首发博客网站，由于图片和格式解析问题，可前往阅读原文随着前端开发复杂度的提升，构建工具在开发流程中扮演着越来越重要的角色。这些工具可以帮助开发者实现代码的打包、优化、转译、模块化处理等功能，从而提升开发效率和用户体验。本文将以当前主流的前端构建工具为核心，介绍它们的特点、适用场景及差异构建工具GruntGrunt是较早期的任务运行工具，主要通过任务（tasks）系统自动化完成前端开发的各种操作
  • Vue 开发效率翻倍：10 个 VS Code 插件助你成为编码高手！ HelloZheQ vue.js前端javascript
    Vue.js作为前端开发的热门框架，其简洁的语法和强大的功能深受开发者喜爱。为了进一步提升Vue开发效率，VSCode提供了丰富的插件生态系统。今天，我就来分享10个我常用的VSCodeVue插件，它们能帮你告别重复劳动，专注于业务逻辑，让你成为真正的Vue编码高手！工欲善其事，必先利其器。选择合适的插件，能让你的Vue开发之旅事半功倍！核心插件：打造Vue开发的基石Vetur(byPineWu)
  • 每日一道面试题(技术随机）什么是前端工程化？它有什么意义？ 晚夜微雨问海棠呀 前端
    前端工程化是一种系统化、规范化的前端开发方法论，通过整合工具链、制定标准流程和实施最佳实践，将软件工程思想应用于前端开发领域。其核心目标是提升开发效率、保障代码质量和增强可维护性。核心要素：模块化架构采用ESModules/CommonJS实现代码拆分组件化开发（如React/Vue组件体系）//ESModule示例import{utils}from'./core-module';exportde
  • 前端开发书籍分享 returnShitBoy 前端javascriptcsshtml
    为了方便前端开发者搜寻书籍，这期间一直在持续搜集各种前端书籍的电子版，从最初的几十本到后来的两百本，截至今天，一共搜集了330本前端书籍。在这里统一作一个整理，分享给前端开发者。电子书下载地址：链接：https://pan.baidu.com/s/1hTH5NpNhEy0hL0GMtYhLuQ?pwd=zhfi提取码11：zhfi百度网盘链接经常失效，如果失效了请加这个百度网盘群(72566927
  • 鸿蒙5.0实战案例：基于webView的嵌套滚动 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发移动开发ArkUI组件化WebViewWeb组件
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于原生的水印添加能力 敢嗣先锋 移动开发鸿蒙开发HarmonyOSharmonyosc++鸿蒙开发ArkUI移动开发
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于原生能力的深色模式适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos组件化移动开发uiArkUI鸿蒙开发
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 2024下半年软考——软件设计师30天冲刺学习指南！！！ winin2024 经验分享软件设计师
    距离2024下半年软件设计师考试已经只剩一个多月了，还没有开始备考的小伙伴赶紧行动起来。为了帮助大家更好的冲刺学习，特此提供一份考前30天学习指南。本指南包括考情分析、学习规划、冲刺攻略三个部分，可以参考此指南进行最后的复习要领，相信小伙伴们，在这一过程中所付出的努力，都能得到回报~第一部分考情分析1、综合知识知识点分数说明比例软件工程基础知识13开发方法与开发模型、数据流图与数据字典、结构化设计
  • 如何使用Python快速开发一个带管理系统界面的网站-解析方案 萧鼎 python基础到进阶教程python开发语言
    如果你想用Python开发一个管理系统界面的网站，并且希望界面美观，可以考虑以下几个框架和库：1.Streamlit（快速、简洁）适合：数据分析、仪表盘、内部管理系统特点：写法简单，类似JupyterNotebook自带现代化UI，无需前端开发内置交互组件，如表单、图表、按钮缺点：不适合复杂的权限管理和大规模系统示例代码：importstreamlitasstst.title("管理系统")st.
  • 2025：前端开发真的结束了吗，还是刚刚起步？ @大迁世界
    想象一下：你花了几年时间精通JavaScript、CSS，并与后端API亲密互动。然后有一天，你在LinkedIn上看到一条帖子写道：“前端开发死了！AI和无代码工具已经接管！”你的心跳一瞬间加速。是不是该换个职业了？或许去做个咖啡师？（至少咖啡的需求永远不会消失。）别急着慌张，我们先冷静分析一下。前端开发真的结束了吗，还是它仅仅在发生变化？接下来，我们来探讨一下这个话题。AI正在取代我们的工作随
  • 【中项】系统集成项目管理工程师-第5章 软件工程-5.6软件质量管理与5.7软件过程能力成熟度 日记成书 【中项】系统集成项目管理工程师软件工程学习职场和发展
    前言：系统集成项目管理工程师专业，现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。软考同样是国家人社部和工信部组织的国家级考试，全称为“全国计算机与软件专业技术资格（水平）考试”，目前涵盖了计算机软件、计算机网络、计算机应用技术、信息系统、信息服务5大领域，总共27个科目，也是分为初、中、高三个级别。通信专业主要需要关注“计算机网络”这个专业类别，可以考的科目有初级资格的“网
  • 从嵌入式到 AI：如何从零开始进入人工智能行业 嵌入式Jerry AI人工智能嵌入式硬件物联网YOLO数据挖掘
    你是否在嵌入式开发中遇到了瓶颈？是否希望结合AI技术提升自己的竞争力？本篇博文将从零开始，详细讲解如何从嵌入式软件工程转向AI，并提供实战建议，让你更顺畅地进入AI领域。1.为什么嵌入式开发者适合进入AI领域？随着人工智能（AI）的快速发展，智能设备、物联网（IoT）、自动驾驶、机器人等领域对AI结合嵌入式系统的需求越来越大。那么，为什么嵌入式开发者适合进入AI领域呢？✅硬件和软件结合能力：嵌入式
  • knob UI插件使用 换个号韩国红果果 JavaScriptjsonpknob
    图形是用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配置： <!-- 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 maventestunitcoberturareport
    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.xmlsession失效监听器
    在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
  • java jvm常用命令工具 bijian1013 javajvm
    一.概述         程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆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 pythonKettlepymysqlcx_Oracleubuntu 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 Ajaxasync
    Ajax正确但是请求不到值解决方案   解决方案：1 .     async: false ,    2.     设置延时执行js里的ajax或者延时后台java方法！！！！！！！   例如：   $.ajax({     &
  • windows安装配置php+memcached dcj3sjt126com PHPInstallmemcache
    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 javaBOVODAOPOJOpo
        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 springwebserviceCXF
    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 clinux
    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几种对象的解释 衞酆夼 javaVOBOPOJOpo
    PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象 封装业务逻辑的java对象
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他