html小例子

来源：互联网发布：淘宝卖家如何提前收款编辑：程序博客网时间：2024/05/22 01:39

精美选项卡效果：
关键代码：

 $(function(){    $(".sel span").mouseover(function(){      $(this).addClass("bg").siblings().removeClass();      var index=$(this).index();      $(".list ul").eq(index).show().siblings().hide();      });});

mousemove事件通过鼠标在元素上移动来触发。
行内元素(span)代码尽量写在一行上，不写在一行上(换行)会有空格
(这两个块之间会有空格)
源代码：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>精美选项卡特效</title><!-- 引用 css样式 高:300m;  宽：400m; px像素--><style type="text/css">*{  margin:0px;  padding:0px;  }#product{  width:862px;  height:250px;  margin:100px auto 0px;  }#product .title{  height:30px;  border-bottom:solid 1px #000;  }#product .title .txt{  width:170px;  height:30px;  float:left;  font-size:14px;  line-height:30px;  }#product .title .sel{  width:364px;  height:30px;  float:right;  }#product .title .sel span{  width:120px;  height:29px;  border:solid 1px #ddd;  display:block;  font-size:12px;  line-height:29px;  text-align:center;  border-right:0px;  border-bottom:0px;  float:left;  }#product .list{  height:220px;  }#product .list ul li{  width:214px;  height:215px;  border:solid 1px #ddd;  list-style:none;  float:left;  text-align:center;  border-top:0px;  border-right:0px;  }#product .list ul li.last{  border-right:1px solid #ddd;  width:213px;  }#product .list ul li p{  font-size:12px;  line-height:20px;  }#product .list ul li img{  margin-bottom:20px;  }#product .list ul{  display:none;  }.bg{  cursor:pointer;  background:pink;  }</style> <div id="Product">    <!--标题开始-->    <div class="title">        <div class="txt">专属于你的包橱</div>        <div class="sel">            <span class="active">发现喜欢</span><span >正在促销</span><span class="last">最近浏览</span>        </div>    </div>    <!--标题结束-->    <!--产品列表开始-->    <div class="List">        <ul style="display:block;">            <li> <img src="images/1.jpg" width="127" height="127"/>                  <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/2.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/3.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li class="last">                 <img src="images/4.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>        </ul>        <ul>            <li> <img src="images/5.jpg" width="127" height="127"/>                  <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/6.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/7.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li class="last">                 <img src="images/8.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>        </ul>        <ul>            <li> <img src="images/9.jpg" width="127" height="127"/>                  <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/10.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li> <img src="images/11.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>            <li class="last">                 <img src="images/1.jpg" width="127" height="127"/>                 <p>麦包包(M Plus) 手提单肩斜挎包</p>                 <p><b>￥148</b> <del>￥338</del></p>            </li>        </ul>    </div>    <!--产品列表结束--></div><!--引用外部的 jquery 类库文件 --><script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script><script type="text/javascript" >    $(".sel span").mouseover(function(){        $(this).addClass("active").siblings().removeClass("active"); //class="active"        var _index=$(this).index(); //获取序列号        $(".List ul").eq(_index).show().siblings().hide();    });</script>

阅读全文

0 0