<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #boss{ margin:auto ; width: 500px; background-color:#C48698; border: 2px; } #boss ul li { list-style: none; } #boss ul li div { display: none; height: 500px; /**/ } p{ margin-top: 2px; width: 500px; height:50px; background-color:#f9f9f9; border:2px #4eac30; } </style> <script src="jquery-3.2.0.min.js"></script></head><body><div id="boss" > <ul id="ul"> <li> <p class="p1"> </p> <div id="div1" class="sjb"></div> </li> <li> <p class="p2"> </p> <div id="div2" class="sjb"></div> </li> <li> <p class="p3"> </p> <div id="div3" class="sjb"></div> </li> </ul></div><script> $(‘.p1‘).click(function(){ $(‘.sjb‘).slideUp(); $("#div1").slideDown(); $("#div1").css({ backgroundColor:‘#79ADA5‘ }); }); $(‘.p2‘).click(function(){ $(‘.sjb‘).slideUp(); $("#div2").slideDown(); $("#div2").css({ backgroundColor:‘#2C677E‘ }); }); $(‘.p3‘).click(function(){ $(‘.sjb‘).slideUp(); $("#div3").slideDown(); $("#div3").css({ background:‘#29315D‘ }); }); </script></body></html>
时间: 2024-09-30 22:55:29