一个只会ctrl+C&V的摩羯座 2021-09-18 22:19 采纳率: 50%
浏览 81
已结题

jquery点击添加背景

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2021-09-18 22:24
    关注

    类似jquery选项卡切换效果

    使用jquery实现选项卡切换效果 - SCLQ - 博客园 几张简陋的框架效果图 页面加载时： 选项卡操作后： css样式： <style type="text/css"> *{margin:0px;padding:0px;} https://www.cnblogs.com/scc-/p/9507645.html

    你题目的解答代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.list p.active{
    background-color:#e73839;
    color:white;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
　　$(".list p").click(function ()　{
　　　　//获取点击的元素给其添加样式，讲其兄弟元素的样式移除
　　　　$(this).addClass("active").siblings().removeClass("active");
　　　　//获取选中元素的下标
　　　　var index = $(this).index();
　　　　$(".inner .item").eq(index).show().siblings().hide();
　　});
});

</script>
</head>
<body>

<div class="box">
   <div class="list">
     <p class="active">1</p>
     <p>2</p>
     <p>3</p>
     <p>4</p>
     <p>5</p>
  </div>
   <div class="inner">
     <div class="item">第一块</div>
     <div class="item" style="display: none;">第二块</div>
     <div class="item" style="display: none;">第三块</div>
     <div class="item" style="display: none;">第四块</div>
     <div class="item" style="display: none;">第五块</div>
  </div>
</div>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • jQuery点击调色板变换背景特效代码
    2021-03-20 00:52
    【jQuery点击调色板变换背景特效代码】是一个利用JavaScript库jQuery实现的功能，它允许用户通过点击调色板来改变网页的背景颜色。这个特效能够增强用户的交互体验，为网站增添个性化色彩，尤其适用于那些需要突出...
  • jQuery点击按钮网页背景切换特效代码
    2021-03-20 02:59
    【jQuery点击按钮网页背景切换特效代码详解】 在网页设计中，动态效果往往能提升用户体验，使得网站更加生动有趣。"jQuery点击按钮网页背景切换特效代码"是一个利用jQuery库实现的功能，它允许用户通过点击按钮来...
  • jQuery鼠标点击切换背景图片代码.zip
    2022-11-22 17:15
    本资源"jQuery鼠标点击切换背景图片代码.zip"显然是一个使用jQuery实现的简单功能，即当用户点击某个元素时，页面背景图片会进行切换。这个功能在网页设计中常用于创建交互性更强的用户体验。 首先，我们来了解一下...
  • jquery下拉点击改变背景图片代码.zip
    2022-11-22 17:15
    这个压缩包“jquery下拉点击改变背景图片代码.zip”包含了一个示例，展示了如何利用jQuery来实现一个下拉菜单，当用户点击菜单项时，能够动态地改变页面的背景图片。这个功能在许多网站的导航设计中非常常见，可以...
  • jQuery添加背景动画效果插件.zip
    2022-11-22 17:15
    在我们的案例中，"jQuery添加背景动画效果插件.zip"可能包含一个或多个这样的插件，这些插件可能已经封装了实现各种背景动画的函数，只需简单调用即可。 总结，使用jQuery创建背景动画效果是前端开发中的常见实践。...
  • jQuery点击切换背景图片代码
    2019-10-30 21:22
    本主题聚焦于使用jQuery实现点击事件来切换页面背景图片。jQuery的易用性和强大的功能使得这样的交互变得轻而易举。 首先，我们需要理解jQuery的基本用法。jQuery库通过`<script>`标签引入到HTML文档中，通常放在`...
  • jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
    2020-10-23 17:52
    在如今的前端开发中，利用jQuery为网页元素添加动态效果已经是非常常见的一种做法。特别是在创建导航菜单时，我们经常需要实现点击菜单项后，该项能够以高亮或特殊背景色的形式呈现给用户，以提示当前位置。本文将...
  • 前端jquery练习网页
    2023-10-12 02:36
    这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
  • jquery改变tr背景色的示例代码
    2020-10-26 11:43
    这样，只需在 CSS 中定义 `.highlight` 类，jQuery 就能轻松地添加或移除这个类，从而改变行的背景色。 总之，jQuery 提供了强大而灵活的方法来改变 HTML 元素的样式，包括表格行的背景色。通过选择器、CSS 属性...
  • jQuery跳动遮罩背景 jQuery跳动遮罩背景网页特效.zip
    2022-11-22 17:15
    总的来说，"jQuery跳动遮罩背景"是一个结合了前端技术的综合应用案例。它展示了如何通过jQuery来控制动态效果，使用CSS3创建复杂的动画，以及HTML5提供结构化内容的框架。这样的特效不仅能够增强网页的视觉吸引力，...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月27日
  • 已采纳回答 9月19日
  • 创建了问题 9月18日