计划
计划

JS实现自适应宽度的Tag切换

 

效果体验：http://hovertree.com/texiao/js/3.htm

 

该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。


HTML文件代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现自适应宽度的Tag切换 - HoverTree</title><base target="_blank" />
<style type="text/css">
#hovertreecon {
FONT-SIZE: 12px;
MARGIN: 0px auto;
WIDTH: 600px;
}

#hovertreecon a {font-size:14px;line-height:20px;
color:blue;text-decoration:none;}

#hovertreetags {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 10px;
WIDTH: 400px;
PADDING-TOP: 0px;
HEIGHT: 23px;
}

#hovertreetags LI {
BACKGROUND: url(http://hovertree.com/texiao/js/3/tagleft.gif) no-repeat left bottom;
FLOAT: left;
MARGIN-RIGHT: 1px;
LIST-STYLE-TYPE: none;
HEIGHT: 23px;
}

#hovertreetags LI A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND: url(http://hovertree.com/texiao/js/3/tagright.gif) no-repeat right bottom;
FLOAT: left;
PADDING-BOTTOM: 0px;
COLOR: #999;
LINE-HEIGHT: 23px;
PADDING-TOP: 0px;
HEIGHT: 23px;
TEXT-DECORATION: none;
}

#hovertreetags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%;
WIDTH: 4px;
}

#hovertreetags LI.hovertreeSelectTag {
BACKGROUND-POSITION: left top;
MARGIN-BOTTOM: -2px;
POSITION: relative;
HEIGHT: 25px;
}

#hovertreetags LI.hovertreeSelectTag A {
BACKGROUND-POSITION: right top;
COLOR: #000;
LINE-HEIGHT: 25px;
HEIGHT: 25px;
}

#hovertreeContent {
BORDER-RIGHT: #aecbd4 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: #aecbd4 1px solid;
PADDING-LEFT: 1px;
PADDING-BOTTOM: 1px;
BORDER-LEFT: #aecbd4 1px solid;
PADDING-TOP: 1px;
BORDER-BOTTOM: #aecbd4 1px solid;
BACKGROUND-COLOR: #fff;
}

#hovertreeContent DIV.hovertreeSelectTag {
DISPLAY: block;
}

.hovertreeTagContent {
PADDING-RIGHT: 10px;
DISPLAY: none;
PADDING-LEFT: 10px;
BACKGROUND: url(http://hovertree.com/texiao/js/3/bg.gif) repeat-x;
PADDING-BOTTOM: 10px;
WIDTH: 576px;
COLOR: #474747;
PADDING-TOP: 10px;
HEIGHT: 250px;
}
</style>
</head>
<body>
<div id="hovertreecon">
<ul id="hovertreetags">
<li>
<a onclick="hovertreeSelectTag('hovertreeTagContent0',this)"
href="javascript:void(0)">标签一</a>
</li>
<li class="hovertreeSelectTag">
<a onclick="hovertreeSelectTag('hovertreeTagContent1',this)"
href="javascript:void(0)">标签二</a>
</li>
<li>
<a onclick="hovertreeSelectTag('hovertreeTagContent2',this)"
href="javascript:void(0)">自适应宽度的标签</a>
</li>
</ul>
<div id="hovertreeContent">
<div class="hovertreeTagContent" id="hovertreeTagContent0">第一个标签的内容<br />
<ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm">网页顶部定时收起广告jQuery特效</a></li><li><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">简洁的HTML+CSS下拉菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">CSS带说明信息导航菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">HoverTree带说明的CSS菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/f25wc8ik.htm">DIV和LI实现表格</a></li><li><a href="http://hovertree.com/hvtart/bjae/wucpcnjm.htm">JavaScript变换表格边框颜色</a></li><li><a href="http://hovertree.com/hvtart/bjae/ae553e2f1027d0ff.htm">使用jQuery改变链接的颜色</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm">一个简单的移动端网页</a></li><li><a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">jQuery突出图片列表中鼠标经过项</a></li></ul>
</div>
<div class="hovertreeTagContent hovertreeSelectTag" id="hovertreeTagContent1">第二个标签的内容<br />
<ul style="list-style:none;"><li><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/wokffp10.htm">原文</a> <a href="http://hovertree.com/hvtart/bjae/1cijrgj1.htm">jQuery操作select</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6fd7e9e75b8773b.htm">jQ的css() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/47ce00836ac8b662.htm">jQuery的几个特点</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6f6650a1b6ce369.htm">jQuery的发展和应用</a></li><li><a href="http://hovertree.com/hvtart/bjae/a3fc809e13e1157e.htm">jquery通过HTML标签实现控件隐藏</a></li><li><a href="http://hovertree.com/hvtart/bjae/5aac47a87eb2a3c2.htm">盘点jQuery弃用的函数</a></li><li><a href="http://hovertree.com/hvtart/bjae/c5a746a2d25d43b7.htm">jQuery 属性操作 - attr() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/e367418912caa0b8.htm">JQuery实现锚点平滑滚动</a></li><li><a href="http://hovertree.com/hvtart/bjae/e23e16b491f3cae2.htm">关于Jquery中的$.each获取各种返回类型数据的使用方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/fa1cb9dc2e859da8.htm">jQuery使用的8个经验技巧</a></li></ul>
</div>
<div class="hovertreeTagContent" id="hovertreeTagContent2">第三个标签的内容
<br />
<ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/bvnsa1gk.htm">div标签嵌套浮动div标签时无法撑开外部div的解决办法</a></li><li><a href="http://hovertree.com/hvtart/bjae/kl77symv.htm">web前端开发之编写高质量代码</a></li><li><a href="http://hovertree.com/hvtart/bjae/nf4w1l0h.htm">3个有用的css小知识</a></li><li><a href="http://hovertree.com/hvtart/bjae/ia0qi2nv.htm">用CSS设置Table的细边框的最好用的方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/usi4p1v9.htm">如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入</a></li><li><a href="http://hovertree.com/hvtart/bjae/j2w0mylg.htm">CSS选择器介绍</a></li><li><a href="http://hovertree.com/hvtart/bjae/isnqi1t4.htm"> Css中的两个重要概念：块状元素和内联元素</a></li><li><a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm">伪类link,hover,active,visited,focus的区别</a></li><li><a href="http://hovertree.com/hvtart/bjae/alaxpy6v.htm">实例看padding与margin的区别</a></li><li><a href="http://hovertree.com/hvtart/bjae/4a41528072f21543.htm">div+css页面居中代码</a></li></ul>

</div>
</div>
</div>

<script>
function hovertreeSelectTag(showContent, selfObj) {
// 操作标签
var tag = document.getElementById("hovertreetags").getElementsByTagName("li");
var taglength = tag.length;
for (i = 0; i < taglength; i++) {
tag[i].className = "";
}
selfObj.parentNode.className = "hovertreeSelectTag";
// 操作内容
for (i = 0; j = document.getElementById("hovertreeTagContent" + i) ; i++) {
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

你可能感兴趣的:(JS实现自适应宽度的Tag切换)

  • 微信小程序开发文档 弱水*三千 微信小程序
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言要开发小程序首先得有个官方认可的账号才行注册账号,有了账号接下来就必须有个开发小程序的开发工具开发工具,接下来就可以大显身手敲代码了微信公共平台登录登录第一行代码1.开发工具目录这里先讲解一下后裔wxml,这个文件就是写入网页标签的地方,js就是写入代码的地方,wxss就是写入样式的地方搞明白这些就开始我们的第一行代码.2.数据绑
  • Selenium与MySQL数据校验自动化 噔噔噔噔@ 软件测试面试题专栏软件测试基础及工具分享自动化运维selenium集成测试
    在使用Selenium进行UI自动化测试时，如果需要连接MySQL数据库进行数据校验，可以通过以下步骤实现：1.安装必要的库首先，确保你已经安装了以下Python库：selenium：用于UI自动化。mysql-connector-python或pymysql：用于连接MySQL数据库。你可以使用以下命令安装这些库：pipinstallseleniummysql-connector-python2
  • 如何vscode中安装代码规范工具—cpplint fttony2020 代码规范
    1）在Vscode中搜索并安装插件cpplint2）接着打开终端，输入sudopipinstallcpplint3）再次输入ls-l/usr/local/bin/cpplint检查安装目录，一般会安装在/usr/local/bin/cpplint目录下如果不在此目录下，需要在vscode中手动配置一下cpplint的执行路径4）打开vscode的设置界面，输入clang，如图所示，将代码风格设置为
  • 2024年机电工程师最新面试题及答案 静水流深497 #全行业面试题库硬件工程
    由于篇幅限制，以下是一些机电工程师可能会遇到的面试问题及其简要答案概述。###机电工程师面试题1.**什么是机电一体化？**2.**机电一体化系统有哪些关键组件？**3.**什么是伺服电机？**4.**伺服电机和步进电机有什么区别？**5.**什么是可编程逻辑控制器（PLC）？**6.**PLC在工业自动化中的作用是什么？**7.**什么是人机界面（HMI）？**8.**HMI在自动化系统中的作用
  • 优麒麟 20.04 LTS Pro 发布 | 以初心，铸匠心 优麒麟 优麒麟UKUI操作系统
    优麒麟20.04LTSPro发布|附详细更新列表北京时间2021年4月22日，优麒麟团队很高兴地宣布优麒麟（UbuntuKylin）开源操作系统20.04LTSPro版本正式发布。优麒麟20.04Pro是基于20.04长期支持版本的更新，官方将提供5年的技术支持。优麒麟20.04Pro版本默认搭载最新Linux5.10LTS内核，新增自主研发的麒麟音乐、麒麟录音、麒麟摄像头、麒麟桌面安装程序、麒麟
  • uniapp 实现微信小程序电影选座功能 鹤鸣的日常 uni-app微信小程序javascriptvue.js前端小程序
    拖动代码/***获取点击或触摸事件对应的座位位置*通过事件对象获取座位的行列信息*@param{Event|TouchEvent}event-点击或触摸事件对象*@returns{Object}返回座位位置对象，包含行(row)和列(col)信息，若未找到有效位置则返回{row:-1,col:-1}*/getSeatPosition(event){//统一处理触摸事件和点击事件//触摸事件时从to
  • Seata：分布式事务的终极解决方案 斗-匕 分布式
    在微服务架构中，事务一致性是开发者面临的核心挑战之一。当一个业务操作需要跨多个服务完成时（如电商系统的下单、扣库存、扣积分），如何保证所有服务要么全部成功，要么全部回滚？Seata（SimpleExtensibleAutonomousTransactionArchitecture）作为阿里巴巴开源的分布式事务解决方案，提供了优雅的解决思路。本文将深入剖析其核心原理、事务模式及实战应用。一、Seat
  • Seata：分布式事务的终极解决方案与深度实践 斗-匕 分布式
    Seata：分布式事务的终极解决方案与深度实践在微服务架构中，订单支付需调用支付服务、库存服务和积分服务，若其中一个服务失败，如何保证数据的一致性？传统的单体事务（ACID）无法跨越服务边界，而分布式事务的复杂性让许多开发者望而生畏。Seata（SimpleExtensibleAutonomousTransactionArchitecture）作为阿里巴巴开源的分布式事务中间件，提供了AT、TCC
  • Vue3：构建高效用户界面的利器 烂蜻蜓 Vue3uivue.jsvue
    一、Vue.js简介Vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。它只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，学习起来非常简单。本文将基于Vue3以上版本展开探讨。二、渐进式框架的魅力（一）什么是渐进式框架渐进式框架是指那些允许开发者根据项目需求逐步引入和使用其功能的框架，而不需要一次性全部使
  • Shiro授权 斗-匕 oracle数据库
    在Java安全领域，ApacheShiro以其强大的功能和灵活性备受开发者青睐。其中，授权机制是Shiro的核心功能之一，它确保了用户只能访问其被授权的资源。本文将深入探讨Shiro授权，涵盖静态和动态授权、权限、角色、隐式角色、显式角色、授权流程以及授权方式等方面。一、Shiro简介ApacheShiro是一个功能强大的Java安全框架，它提供了认证、授权、加密和会话管理等功能。Shiro的设计
  • SQL 数据库管理：提升数据管理效率的关键 斗-匕 oracle数据库
    SQL数据库管理：提升数据管理效率的关键在当今数字化时代，数据的重要性不言而喻。无论是企业的业务数据、科研机构的实验数据，还是个人的信息数据，都需要有效的管理和存储。SQL（StructuredQueryLanguage）数据库作为一种广泛使用的数据管理工具，在各个领域都发挥着重要作用。本文将深入探讨SQL数据库管理的重要性、关键技术和最佳实践。一、SQL数据库管理的重要性数据存储和组织SQL数据
  • Docker镜像瘦身终极指南：七种武器让你的镜像体积减少90%! DevKevin 日常笔记docker容器运维
    文章目录引言为什么要关注Docker镜像瘦身？(强调重要性)七种Docker镜像瘦身武器(核心内容，分点详细讲解)--------第二阶段：运行阶段--------引言你是否也曾被Docker镜像那臃肿的身材所困扰？动辄几百兆甚至上G的镜像，不仅霸占着宝贵的硬盘空间，更拖累了镜像拉取和容器启动的速度，严重影响了开发和部署效率，简直让人“闻Image色变”！别担心！今天，我就将为你揭秘Docker镜
  • 数据访问：JPA 关联& MyBatis 斗-匕 oracle数据库
    创建项目添加关键依赖包:任何使用方式都需要首在pox.xml中引入mybatis-spring-boot-starter的启动器，我们使用项目向导添加的依赖如下：application.ymlspring:#配置数据源datasource:driver-class-name:com.mysql.cj.jdbc.Driverurl:jdbc:mysql://localhost:3306/crm?us
  • 分布式节点池：群联云防护抗DDoS的核心武器 群联云防护小杜 安全问题汇总分布式ddos前端node.jsudp网络npm
    一、节点池的核心作用与架构设计1.全球分布式节点布局物理层防御：根据产品文档，群联在全球部署“海量分布式节点”，每个节点具备独立清洗能力，攻击流量被分散至不同区域节点处理。优势：避免传统单节点防护的瓶颈，即使单个节点被击溃，其他节点仍可接管流量（文档提到“节点数量很多，即使打死几个对绝大多数用户无影响”）。逻辑层调度：节点池分为“正常组”和“风险组”，智能调度系统实时检测节点健康状态，动态分配最优
  • 对接马来西亚、印度、韩国、越南等全球金融数据示例 CryptoPP 金融pythonwindows
    Python对接StockTV全球金融数据API的封装实现及使用教程：importrequestsimportwebsocketsimportasynciofromtypingimportDict,List,Optional,UnionfromdatetimeimportdatetimeclassStockTVClient:"""StockTV全球金融数据API客户端支持股票、外汇、期货、加密货币
  • 深度剖析淘宝拍立淘按图搜索商品API技术规范 数据捕手19970108018 爬虫技能晋升路线图搜索算法算法
    在电商技术蓬勃发展的当下，淘宝的拍立淘功能以其独有的按图搜索商品特性，为用户打造了便捷且新颖的购物体验。这一功能背后的强大支撑——淘宝拍立淘按图搜索商品API，不仅革新了传统电商搜索模式，还为开发者和企业开拓了创新应用的广阔空间。深入了解该API的技术规范，对充分挖掘其潜力、提升电商业务效率和用户体验，具有至关重要的意义。一、淘宝拍立淘按图搜索商品API概述淘宝拍立淘按图搜索商品API，是淘宝开放
  • Windows空间和Linux空间的最大的区别是什么？ 网硕互联的小客服 服务器运维linuxphp网络
    Windows空间和Linux空间是网站托管和应用部署中常用的两种服务器环境，它们之间存在多方面的显著差异。以下是Windows空间和Linux空间的主要区别：###一、操作系统***Windows空间**：使用WindowsServer操作系统，如WindowsServer2016、2019等。这些系统提供图形用户界面（GUI），便于用户操作和管理。***Linux空间**：使用Linux操作系
  • 基于MATLAB的遗传算法优化BP神经网络航空发动机寿命预测 默默科研仔 发动机寿命预测matlab神经网络发动机寿命预测
    基于MATLAB的遗传算法优化BP神经网络航空发动机寿命预测一、基本原理与优化框架遗传算法（GA）与BP神经网络的结合（GA-BP）主要通过全局搜索优化BP神经网络的初始权值和阈值，解决传统BP易陷入局部最优、收敛速度慢的问题。具体优化形式包括：初始参数优化：GA仅优化初始参数，后续仍依赖BP反向传播微调。全局参数优化：GA直接优化全部网络参数，无需BP参与。混合优化：GA优化初始参数后，再通过B
  • 2000-2019年 全国低碳城市和企业绿色技术创新数据 小王毕业啦 大数据人工智能数据挖掘大数据数据分析毕业论文数据统计深度学习
    2000-2019年全国低碳城市和企业绿色技术创新数据https://download.csdn.net/download/2401_84585615/90214703https://download.csdn.net/download/2401_84585615/902147032000年至2019年，中国在低碳城市建设和企业绿色技术创新方面取得了显著进展。低碳城市试点政策的实施，显著促进了企业
  • 10-29 插入学生总学分表(MSSQL) 拿下pta500题 sqlserver数据结构数据库mssql
    本题目要求编写Insert语句，计算每位同学获得的总学分，并将所有学生的总学分按学号升序排序后一起插入到totalcredit表中。注意：1）当某门课程成绩在60分以上时才能合计计入总学分2）如果某学生尚未选修任何课程时，总学分计为0，并插入到totalcredit表中。3）执行Insert语句之前，totalcredit表中没有任何记录。提示：MSSQLServer评测SQL语句。inserti
  • 统计机器学习 (Statistical Machine Learning) 原理与代码实例讲解 AGI大模型与大数据研究院 DeepSeekR1&大数据AI人工智能计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    统计机器学习(StatisticalMachineLearning)原理与代码实例讲解1.背景介绍统计机器学习是现代人工智能和数据科学的核心领域之一。它结合了统计学和计算机科学的理论与方法，通过数据驱动的方式来构建预测模型和决策系统。统计机器学习不仅在学术研究中占据重要地位，还在工业界有广泛应用，如推荐系统、图像识别、自然语言处理等。2.核心概念与联系2.1统计学与机器学习的关系统计学关注数据的收
  • python局部变量和全局变量 yqd666 python开发语言数据库
    文章目录1.局部变量和全局变量2.局部变量2.1局部变量的作用2.2局部变量的生命周期3.全局变量3.1函数不能直接修改`全局变量的引用`3.2在函数内部修改全局变量的值3.3全局变量定义的位置3.4全局变量命名的建议1.局部变量和全局变量（1）局部变量是在函数内部定义的变量，只能在函数内部使用（2）全局变量是在函数外部定义的变量（没有定义在某一个函数内），所有函数内部都可以使用这个变量（3）提示
  • 图形编辑器基于Paper.js教程25：材料测试矩阵功能的实现 拿我格子衫来 激光切割图形编辑器Paper.js矩阵线性代数图像处理javascript编辑器前端
    最近做了一个材料测试矩阵的需求，现在已经上线了，现在来回顾总结一下，有哪些做的好的，有哪些做的不好的。材料测试矩阵在测试激光头在某一种材料上的表现，很有必要，如果你在一种新的材料上进行加工时，最好先做一次材料测试矩阵，挑选出合适的功率和速度。材料测试矩阵的表单比较多横坐标是功率，纵坐标是速度。最终雕刻效果是会把雕刻的木板切割下来。整个表单需要设置，雕刻模式还是切割模式，然后设置最小最大速度，最小最
  • 分布式事务原理深度解析：从ACID到BASE的架构演进 斗-匕 分布式架构
    在电商系统中，用户下单操作需要同时扣减库存、生成订单、增加积分，这三个步骤可能涉及库存服务、订单服务和积分服务三个独立的系统。若库存扣减成功但订单生成失败，如何保证数据的一致性？这就是分布式事务要解决的核心问题。本文将深入剖析分布式事务的原理，揭示其背后的设计哲学。一、从ACID到CAP：分布式事务的挑战1.单体事务的ACID特性在单体数据库中，事务通过ACID保证数据一致性：原子性（Atomic
  • 详解c++的编译过程，如何从源文件到可执行文件到 飞鼠_ C++c++开发语言
    本节详细介绍c++的编译过程，c++从代码到可执行文件有四个阶段：预处理运行以#好开头的代码，引入头文件，做预处理定义常量等编译对代码进行优化，进行词法与语法的分析，生成与平台无关的中间表示，再将中间代码转换为目标平台的汇编代码。汇编将汇编代码转换为机器码（二进制格式）。链接将目标文件中的未定义符号（如printf）与库文件中的定义匹配。预处理我们可以使用g++-Emain.cpp-omain.i
  • C#网络通信实战：从零打造高性能Socket编程与TCP/IP协议栈应用 墨瑾轩 一起学学C#【一】c#tcp/ip开发语言
    网络通信是现代软件开发中不可或缺的一部分，特别是在分布式系统和互联网应用中。C#提供了丰富的网络编程接口，尤其是基于Socket的TCP/IP协议栈编程，可以实现高性能的网络通信。以下从零开始逐步介绍如何在C#中使用Socket进行高性能网络通信编程，包括创建Socket、连接服务器、发送和接收数据，以及处理并发和错误等，包含详细的代码和注释。一、创建Socket CsharpusingSyste
  • 没有接口文档，该怎么进行接口测试？ 海姐软件测试 接口测试测试工具面试职场和发展
    想获取更多软件测试干货和实战技巧？欢迎扫码关注我的小红书【海姐的测试星球】，一起交流学习，解锁更多测试秘籍！在面试中如何回答好“没有接口文档，该怎么进行接口测试”，可按以下要点阐述，全面展现你的应变能力和专业素养：沟通协调-与开发人员沟通：主动与开发人员交流，了解接口的基本信息，如接口的用途、请求方法（GET、POST等）、大致的请求参数和响应格式。例如，询问该接口是用于用户登录、数据查询还是其他
  • OctoTools：一个具有复杂推理可扩展工具的智体框架 三谷秋水 智能体大模型机器学习人工智能语言模型机器学习
    25年2月来自斯坦福大学的论文“OctoTools:AnAgenticFrameworkwithExtensibleToolsforComplexReasoning”。解决复杂的推理任务可能涉及视觉理解、域知识检索、数值计算和多步骤推理。现有方法使用外部工具增强大语言模型(LLM)，但仅限于专业领域、有限的工具类型或需要额外的训练数据。本文的OctoTools，是一个无需训练、用户友好且易于扩展的
  • 华为海思 CPU「麒麟 X90」曝光 自不量力的A同学 华为
    2025年3月15日，中国信息安全评测中心发布安全可靠测评结果公告（2025年第1号），华为海思麒麟X90处理器首次曝光，其安全可靠等级评测结果为II级。相关信息如下：架构与制程：采用华为自研的“泰山V3”架构，基于ARMv9指令集，首次在PC端实现“超线程+大小核异构”设计，集成多达16核（4大核+12能效核），主频突破4.2GHz。推测制程为中芯国际N+2的等效7nm技术。芯片集成：将CPU、
  • Vuex 和 Pinia 的对比 徐福记c vue.js前端javascript
    Vuex和Pinia都是Vue状态管理库，但它们有一些区别：1.开发背景Vuex：Vuex是Vue.js官方推出的状态管理库，主要用于管理复杂应用中的全局状态。它在Vue2和Vue3中都被广泛使用。Pinia：Pinia是一个社区驱动的状态管理库，最初是为了弥补Vuex在某些场景下的不足而创建的。现在，它已经被Vue官方认可，并成为Vue3推荐的状态管理库之一。2.API设计Vuex：使用stor
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他