不爱搬砖的码农
不爱搬砖的码农

原生JavaScript实现Tab栏切换案例

Tab栏是前端常见的一个业务。下面是基于html+css+javascript的tab栏代码示例：

DOCTYPE html>
<html>
  <head>
    <title>Tab栏切换示例title>
    <style>
      /* 设置Tab栏容器的样式 */
      .tab-container {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        width: 600px;
        margin: 0 auto;
      }
      /* 设置Tab按钮的样式 */
      .tab-item {
        padding: 10px;
        cursor: pointer;
        font-size: 20px;
        color: #333;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease-in-out;
      }
      /* 设置当前Tab按钮的样式 */
      .tab-item.active {
        color: #f00;
        border-bottom-color: #f00;
      }
      /* 设置Tab内容容器的样式 */
      .tab-content-container {
        width: 600px;
        margin: 0 auto;
        padding-top: 20px;
      }
      /* 设置Tab内容的样式 */
      .tab-content {
        display: none;
      }
      /* 设置当前Tab内容的样式 */
      .tab-content.active {
        display: block;
      }
    style>
  head>
  <body>
    <div class="tab-container">
      
      <div class="tab-item active" data-target="tab1">Tab 1div>
      <div class="tab-item" data-target="tab2">Tab 2div>
      <div class="tab-item" data-target="tab3">Tab 3div>
    div>
    <div class="tab-content-container">
      
      <div class="tab-content active" data-tab="tab1">这是Tab 1的内容div>
      <div class="tab-content" data-tab="tab2">这是Tab 2的内容div>
      <div class="tab-content" data-tab="tab3">这是Tab 3的内容div>
    div>
    <script>
      // 获取Tab按钮和Tab内容的容器
      var tabContainer = document.querySelector('.tab-container');
      var tabContentContainer = document.querySelector('.tab-content-container');
      // 获取所有的Tab按钮和Tab内容
      var tabItems = document.querySelectorAll('.tab-item');
      var tabContents = document.querySelectorAll('.tab-content');
      // 遍历所有的Tab按钮
      for (var i = 0; i < tabItems.length; i++) {
        // 给每个Tab按钮添加点击事件
        tabItems[i].addEventListener('click', function () {
          // 获取被点击的Tab按钮的data-target属性值，即对应的Tab内容的data-tab属性值
          var target = this.getAttribute('data-target');
          // 遍历所有的Tab内容，隐藏除了被点击的Tab内容以外的所有内容
          for (var j = 0; j < tabContents.length; j++) {
            if (tabContents[j].getAttribute('data-tab') === target) {
              tabContents[j].classList.add('active');
            } else {
              tabContents[j].classList.remove('active');
            }
          }
          // 遍历所有的Tab按钮，取消除了被点击的Tab按钮以外的所有按钮的active类名
          for (var k = 0; k < tabItems.length; k++) {
            if (tabItems[k] === this) {
              tabItems[k].classList.add('active');
            } else {
              tabItems[k].classList.remove('active');
            }
          }
        });
      }
    script>
  body>
html>

原生JavaScript实现Tab栏切换案例_第1张图片

你可能感兴趣的:(javascript,前端,html)

  • ajax讲解 夜不眠，码三千 okhttp
    1.AJAX概述1.1什么是ajaxAJAX（AsynchronousJavascriptAndXML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过
  • AJAX异步请求数据 铸键为犁 JavaWebajaxservletjavascript
    文章目录前言一、AJAX是什么？二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么？异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下：$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat
  • python基于django/flask的NBA球员大数据分析与可视化python+java+node.js QQ_511008285 pythondjangoflaskjavaspringboot数据分析
    前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行
  • Java基于spring boot的国产电影数据分析与可视化python+java+node.js QQ_511008285 javaspringboot数据分析pythondjangovue.jsflask
    前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以  该系统使用进行大数据处理和
  • vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码 weixin_40008969 vue表格左右拖拽调整列宽
    写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实
  • 2019-08-01 Sophia_Lu
    JavaScript调试使用debugger进行打断点JavaScript严格模式(usestrict)它不是一条语句，但是是一个字面量表达式，在JavaScript旧版本中会被忽略。"usestrict"的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。
  • pycharm 运行celery_python远程调试及celery调试 夏小龙 pycharm运行celery
    部分来自from:https://www.xncoding.com/2016/05/26/python/pycharm-remote.html你是否经常要在Windows7或MACOSX上面开发Python或Web应用程序，但是它们最后需要在linux上面来运行呢？我们经常会碰到开发时没有问题但是到了正式的Linux环境下面却出现问题。那么怎样保证开发环境跟运行环境的一致呢？通常有两种方法解决。一
  • 解决rsync 同步auth failed on module问题 w36680130 rsyncauthfailedrsync认证失败问题rsync报错
    解决rsync同步authfailedonmodule问题参考文章：（1）解决rsync同步authfailedonmodule问题（2）https://www.cnblogs.com/LD-linux/p/3822162.html备忘一下。
  • rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again. 沧州刺史 后端服务器运维githubactionslinuxssh
    在配置githubactions自动部署前端项目到服务器上时，登录服务器使用的是秘钥登录。出现报错：[general]GITHUB_WORKSPACE:/home/runner/work/clogin-frontend/clogin-frontend[SSH]Creating/home/runner/.sshdirin/home/runner/work/clogin-frontend/clogin
  • 【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行” coderYYY VSCodebug解决方案前端vue.js编辑器visualstudiovscode
    作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可
  • 微信小程序生成小程序转发链接，携带参数跳转到另外一个页面 coderYYY 前端项目教程以及代码小程序微信小程序前端javascript微信
    作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性
  • 前端性能优化 EdmundChen
    要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务
  • 前端页面实现table可拖动改变列宽 牧 码 人 jsjQueryjs表格拖动csscolResizable
    此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
  • 前端入门：JavaScript基础介绍 虞锦雯
    一、JavaScript介绍Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协
  • Web开发详解 你可以自己看 前端
    要做Web开发，就好像你在厨房里要做一顿丰盛的晚餐，从准备食材到最后上桌，整个过程得协调得当。Web开发的流程有前端、后端、数据库、API，以及其他的工具和技术来共同组成。别担心，听起来复杂，但我会给你讲得生动有趣，让你感受到Web开发的美妙。1.前端开发（Web开发的颜值担当）前端就是用户能直接看到和互动的部分，给人的第一印象尤为重要，简直就是网站的“面子工程”。1.1HTML-构建页面骨架HT
  • 网页隐藏版之一行小说阅读器 流落的小鬼 css前端javascript摸鱼神器最佳隐藏
    网页隐藏版之一行小说阅读器显示效果：懒人操作：页面鼠标右键，新建文本文档，复制黏贴以下代码，点击左上角【文件】，点击【另存为】，如下设置，后缀为.html，这样一个本地网页就完成啦~https://baidu.combody{margin:0;padding:0;}p{font-size:15px;margin:0;padding:0;}/*设置文件输入框的样式*/#fileInput{font-
  • JavaScript创建Object对象的方法 流落的小鬼 javascript前端
    JavaScript创建Object对象的方法1、使用new操作符后跟Object构造函数varobj=newObject()person.name='AAA'person.age=192、对象字面量varobj={name:'BBB',age:20}3、与newObject相同varobj={}person.name="CCC"person.age=21
  • JavaScript两个数组的交集 II 流落的小鬼
    刷题记录：JavaScript两个数组的交集II给你两个整数数组nums1和nums2，请你以数组形式返回两数组的交集。输入：nums1=[1,2,2,1],nums2=[2,2]输出：[2,2]varintersect=function(nums1,nums2){varresult=[];vari=0,j=0;nums1.sort((a,b)=>a-b);nums2.sort((a,b)=>a-
  • 智能合约系统DAPP开发 I592O929783 智能合约区块链
    智能合约系统DAPP（去中心化应用）的开发是一个复杂且综合性的过程，它结合了区块链技术、智能合约编程、前端开发以及安全性等多方面的知识和技能。以下是对智能合约系统DAPP开发过程的详细概述：一、需求分析明确应用场景：首先，需要明确DAPP的应用场景，如金融、游戏、社交等。功能需求：确定DAPP需要实现的具体功能，包括数据处理、用户交互等。用户群体：了解目标用户群体的需求和习惯，以便更好地设计DAP
  • 【前端】解决element-ui两层dialog嵌套，遮罩层消失的问题。 道着无为法自然 前端ui
    背景总觉得element-uidialog的遮罩层逻辑有点晦涩，当一个dialog内嵌另一个dialog时，它的遮罩层却始终只有一个，也就是下方class="v-modal"的div。可以看到，v-modal的层级总是比dialog低一层。问题当两层dialog为直接父子关系时，我们可以简单的使用其属性append-to-body,modal-append-to-body来解决问题：如，第二层di
  • 论文分享系列（二）——论微服务架构及其应用 马斯洛金字塔下的小灵猴儿 #软考高项架构师论微服务架构及其应用论文
    论微服务架构及其应用摘要2023年5月，我司启动了精彩购电商系统的开发工作，该项目组中我担任系统架构师岗位，主要负责整体架构设计与中间件选型。本文以该电商平台为例，将介绍微服务架构的特点、应用场景以及实现方法。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三部分。前端Web服务由负载均衡与服务器集群结合，实现高并发的前台界面；平台保障服务以Eureka为中心
  • React 前端应用结合 Nginx 部署指南及常见错误排查 蜗牛去旅行吧 前端react.jsnginx
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
  • 金融爱好者周刊-第 31 期 LuChenghao
    1、中央会议再提“房住不炒”，非常时期非常信号阅读链接:https://3g.163.com/dy/article/GQU7TAV50515983V.html感想：『要继续按照稳定大局、统筹协调、分类施策、精准拆弹的方针，抓好风险处置工作，加强金融法治建设，压实地方、金融监管、行业主管等各方责任，压实企业自救主体责任。』2、详解中央经济工作会议：2022年怎么"稳字当头"？阅读链接:https:/
  • vue3 内置组件＜Teleport＞ fishmemory7sec vue3vue.js前端
    官方文档：Teleport内置组件将一个组件的模板内容渲染到指定的DOM节点位置，而不是在组件自身的挂载点。组件的参数说明：to：必填项。指定目标容器。可以是选择器或实际元素。类型：string|HTMLElement作用：指定要将内容传送（teleport）到的目标位置。可以是一个CSS选择器字符串，用于选择一个现存的DOM元素，也可以是一个实际的DOM元素对象引用。示例：disabled：可选
  • Python——爬虫 星和月 python
    当编写一个Python爬虫时，你可以使用BeautifulSoup库来解析网页内容，使用requests库来获取网页的HTML代码。下面是一个简单的示例，演示了如何获取并解析网页内容：importrequestsfrombs4importBeautifulSoup#发送HTTP请求获取网页内容url='https://www.example.com'#要爬取的网页的URLresponse=requ
  • 1.25-1.26 Coordinator数据集和oozie bundle weixin_30851867
    一、Coordinator数据集二、ooziebundle转载于:https://www.cnblogs.com/weiyiming007/p/10881260.html
  • uniapp设计H5 tabbar会遮挡内容区的解决办法 qq_39016177 uni-app
    uniapp设计H5tabbar会遮挡内容区的解决办法1.现象底部tabbar会遮挡内容区最底部的文字2.解决方法—css中增加个padding-bottom:var(–window-bottom)这样就是好了官方依据官方文档链接https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F诸君有用且点赞
  • JS 获取数组对象中某个属性的最大值或最小值 qq_36437172 JSMath.maxMath.minsortapply
    最近的开发中经常会遇到前端自己生成唯一id，然后在数组中增加删除插入对象，这样一来就要的要当前使用的id的最大值。总结一下，有两种比较简便的方法可以做到：1.将属性值通过map生成一个数组，再使用Math.max取最大值2.使用排序sort，先对数组的项排序，再取排序后的对应的项的值数组对象如下,求id的最大值和最小值list=[{id:1,name:'jack'},    {id:2,name:
  • vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2CanvasjsPDF导出PDF转换DOM操作
    1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如  这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){   downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他