首页 > 其他分享 >Jquery获取a标签并修改其样式

Jquery获取a标签并修改其样式

时间:2023-10-13 19:00:55浏览次数:32  
标签:Jquery function 样式 标签 点击 测试 div css

在头部引用Jquery文件

<script src="jquery-1.8.0.min.js"></script>

添加三个div块中包含a标签

<div><a href="#">测试1</a></div>
<div><a href="#">测试2</a></div>
<div><a href="#">测试3</a></div>

在最下方写script

$ (function () {
    $ ('div a').click(function () {     //获取a标签的点击事件
      $ (this).css ('color','#00ae66');   //this代表当前点击的a标签,直接修改其css样式
    })
  })

全部代码如下,还可以修改其他标签,在(’div a‘)中修改,外部大标签写在左,内部小标签写在右,span、li、ul、ol标签都可写入。或者有一些不懂得地方直接留言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.0.min.js"></script>
</head>
<body>

<div><a href="#">测试1</a></div>
<div><a href="#">测试2</a></div>
<div><a href="#">测试3</a></div>

</body>
</html>

<script>

  $ (function () {
    $ ('div a').click(function () {     //获取a标签的点击事件
      $ (this).css ('color','#00ae66');   //this代表当前点击的a标签,直接修改其css样式
    })
  })

</script>

标签:Jquery,function,样式,标签,点击,测试,div,css
From: https://blog.51cto.com/u_16281588/7850516

相关文章

  • 【前端开发】前端使用Tailwind CSS写样式效率翻倍
    vite+Vue项目配置教程配置地址:https://tailwind.nodejs.cn/docs/guides/vite中文文档:https://tailwind.nodejs.cn/docs/installation说明:使用TailwindCSS可省略写繁琐的css代码,通过用class快速布局,如下图页面全是class,很少会写css代码。 例子:创建variable.css文件,代码如下......
  • 在jQuery中如何检查一个复选框是否被选中?
    内容来自DOChttps://q.houxu6.top/?s=在jQuery中如何检查一个复选框是否被选中?我需要检查复选框的checked属性,并根据该属性使用jQuery执行操作。例如,如果age复选框被选中,那么我需要显示一个文本框以输入age,否则隐藏该文本框。但是以下代码默认返回false:if($('#isAgeSelec......
  • script 标签中的 async 和 defer 属性
    在HTML中会遇到以下三类script:<scriptsrc='xxx'></script><scriptsrc='xxx'async></script><scriptsrc='xxx'defer></script>那么这三类script有什么区别呢?script浏览器在解析HTML的时候,如果遇到一个没有任何属性的script......
  • vue中下载excel文件4种方法,2、通过 a 标签 download 属性结合 blob 构造函数下载发送p
    vue中下载excel文件4种方法,2、通过a标签download属性结合blob构造函数下载发送post请求和后台poi返回文件流实现下载1、通过url下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href=文件路径下载window.location.href=`${location.origin}/opera......
  • git打标签
    可以通过打标签来触发流水线运行,下面给出简单操作教程   这里就表示标签已经打好了,下面需要我们使用git将标签推送上去,就把push代码一样   到此教程全部结束......
  • meta标签
    一、什么是meta标签在HTML文档头部提供元数据的标签。用于向浏览器和搜索引擎提供关于网页的信息。作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!二、mata标签组成属性值描述......
  • 终于搞懂如何用Java去除HTML标签了
    在我平时的工作中,偶尔会用Java做一些解析HTML的工作。有的时候我需要删除所有的HTML标签,只保留纯文字内容。这个问题在做过一些爬虫工作的朋友来说很简单。下面来说说,我们平时使用到的集中解析的方法。使用正则表达式通过爬虫爬到的HTML内容,从程序角度来讲,就是一个字符串。我们......
  • jQuery能做到,PHP能做到,C#也能做到
    题目有些大,但文中谈到的问题很小;看似表扬C#,实际不是。这个小问题来自这样的应用场景——以HTTPPOST的方式调用第三方API,第三方API不支持JSON传参,只能通过URLquerystring方式传参(a=1&b=2)。假设API的地址是https://www.clw9335.com/gl/index-htm-page-9.html,需要传递的参数是us......
  • vue框架,input相同标签如何定位-label定位
    一、问题提出:后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:二、问题思考过程1.为什么以前的版本可以定位成功,而现在的就定位不了啦查阅之前版本的这部分定位代码,发现原来的框架是......
  • Window 11中修改微软edge浏览器alt+tab切换标签而无法切换系统窗口的问题
    最近刚转手使用Edge浏览器的时候发现不能用alt+tab切换别的应用上,在浏览器设置上找了半天还是没有,最后离谱的在系统设置里面多任务窗口找到了这个设置。打开设置找到多任务处理,点开后里面第二项修改为不显示选项卡即可。......