jquery点击添加背景

img

类似jquery选项卡切换效果

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

<!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>

可以给p添加ID，通过单击事件，设置p的background-image属性的url.

修改如下，在原来的的基础上做调整，容易理解

<！--需求：
1.默认显示第一块内容，且对应的1添加红色背景，白色字体颜色
2. 单击哪一个p标签，这个标签要添加红色背景，白色字体颜色。下面的块级内容要对应显示
3.只有当前点击的才有红色背景和白色字体，其它的没有

<div class="box">
   <div class="list" id="list-box">
     <p>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">第二块</div>
     <div class="item">第三块</div>
     <div class="item">第四块</div>
     <div class="item">第五块</div>
  </div>
</div>
<script>
  let listObj =  doucument.getElementById("list-box")
  listObj.addEventListener("click",function(e){
  let allp = document.querySelectorAll(".list p")
  for(let el of allp){
    el.style.color = "black"
    el.style.background = "#ffffff"
  }
  e.target.style.color = "white"
  e.target.style.background = "red"
  let index = e.target.innerText - 1
  let list = doucument.getElementByClassName("inner")
  list[index].style.color = "white"
  list[index].style.background = "red"
})
</script>