html小例子

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

 $(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>

猜你喜欢