首页 > 代码库 > 滑动选项卡特效
滑动选项卡特效
<%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <style type="text/css"> *{margin: 0;padding: 0;} #container{ width: 980px; height: 600px; /*background: #ffcccc;*/ margin: 50px auto; } #container .header { height: 45px; line-height: 45px; border-bottom: 2px solid #000; } #container .header h3 { float: left; margin-left: 20px; } #container .header ul { float: right; margin-top: -2px; } #container .header ul li { list-style: none; float: left; width: 100px; text-align: center; border: 1px solid #ccc; border-right: none; } #container .header ul li:last-child { border-right: 1px solid #ccc; } #container .header ul li.active { border: 2px solid #000; border-bottom: 2px solid #fff; } #container .showCon { margin-top: 10px; } #container .showCon img { width: 980px; } </style> </head> <body> <div id="container"> <div class="header"> <h3>服装</h3> <ul> <li class="active">经典男装</li> <li>靓丽女装</li> <li>可爱童装</li> </ul> </div> <div class="showCon"> <img src="images/1.jpg" /> </div> </div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $("#container .header ul li").hover(function() { var index = $(this).index() + 1; console.log(index); $(this).addClass("active").siblings().removeClass("active"); $("#container .showCon").html("<img src=http://www.mamicode.com/‘images/" + index + ".jpg‘ />"); }); </script> </body></html>
滑动选项卡特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。