当前位置: 首页 > news >正文

jquery 实现简单的标签页效果

实现

<!DOCTYPE html>
<html>
<head><title>jq 实现简单的标签页效果</title><script src="/jquery/jquery-1.11.1.min.js"></script><style>.tab {cursor: pointer;width:100px;height:30px;float:left;text-align:center;background-color:red;color:white;margin:1px;cur}#dv {border:1px solid pink; width:404px;height:100px;  background-color:aliceblue          }</style><script>$(function () {$('div.tab').click(function () {$('#dv').text(this.innerText);});});</script>
</head><body><div class="tab">标签1</div><div class="tab">标签2</div><div class="tab">标签3</div><div class="tab">标签4</div><div id="dv">content</div>
</body>
</html>

效果

在这里插入图片描述

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
请添加图片描述

http://www.lryc.cn/news/276588.html

相关文章:

  • C++ Web框架Drogon初体验笔记
  • x-cmd pkg | busybox - 嵌入式 Linux 的瑞士军刀
  • Java异常简单介绍
  • ocrmypdf_pdf识别
  • 卷积神经网络|猫狗分类系列--导入kaggle猫狗数据集
  • 【linux 多线程并发】线程本地数据存储的两种方式,每个线程可以有同名全局私有数据,以及两种方式的性能分析
  • 2401d,d导入C的问题
  • SpringCloud GateWay实现路由限流
  • 打印日期c++
  • 数据结构入门到入土——链表(1)
  • MySQL C API的使用
  • JavaScript防御性编程
  • 微信预约小程序制作指南:从小白到专家
  • 向量数据库:Milvus
  • 亚马逊国际商品详情 API:获取特定商品详细信息的实践
  • MSB30M-ASEMI小贴片整流桥MSB30M
  • Redis启动方式
  • TEMU 新手小白必看!2024入驻流程/入驻类目/入驻资料等详细流程讲解
  • 【C语言】数组
  • 常见测试技术都有哪些?
  • Spring事务控制
  • swaggerUI不好用,试试这个openapiUI?
  • 嵌入式物联网项目开发实战例程-STM32F103系列之外围器件代码
  • Docker Compose--部署SpringBoot项目--实战
  • 单电阻FOC算法实现永磁同步电机的调整步骤和设置
  • 化学DS-1040 Tosylate 抑制剂 1335138-89-0科研用途
  • PaddlePaddle初使用
  • 【FPGA】分享一些FPGA数字信号处理相关的书籍
  • 深度解析JavaScript面试热点:事件循环、上下文、箭头函数、变量作用域与ES6模块
  • Javaweb之Mybatis的动态SQL的详细解析