切换选项卡+js+css+html

柔情只为你懂 2022-06-04 04:24 215阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script>  
</head>  
<style>  
  .container \{  
            width: 800px;  
            height: 600px;  
            border: 2px solid \#000;  
        \}  
.grade-list \{  
            height: 40px;  
            border-bottom: 1px solid \#999;  
            margin-bottom: 20px;  
            margin-top: 20px;  
        \}  
.grade-list  span\{  
display:block;  
width:20px;  
height:20px;  
border: 1px solid \#000;  
/\*浮动一次\*/  
float: left;  
\}  
.label\_btn \{  
/\*浮动2次\*/  
            float: left;  
            margin-right: 10px;  
        \}  
.butActive \{  
            background: violet;  
        \}  
          
  
  
  
  
</style>  
  
  
<body>  
    
   <div class="container">  
      
        <div class="grade-list clearfix" id="tel">  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>  
        <div class="label\_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>  
            
         <button class="indexBtn" id="loadBtn">加载</button>  
        </div>  
   </div>  
  
  
  
  
  
  
  
  
<script>  
//切换选项卡  
$(".label\_btn>span").click(function()\{  
$(this).toggleClass("butActive");  
\});  
  
  
  
  
</script>  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</body>  
</html>