請(qǐng)問這個(gè)是怎么回事，沒有出現(xiàn)頁面切換
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? ? <base href="<%=basePath%>">
? ??
? ? <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">? ??
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<title>慕課七夕主題</title>
? ? <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
? ? <style type="text/css">
? ? /*初始化所有元素*/
? ? *{
? ? padding:0;
? ? margin:0;
? ? }
? ? /*去點(diǎn)*/
? ? ul,li{
? ? list-style-type:none;
? ? }
? ? /*主體部分*/
? ? #content{
? ? width:60%;
? ? height:60%;
? ? /*top:20%;
? ? left:20%;*/
? ? overflow:hidden;
? ? position:absolute;/*絕對(duì)定位*/
? ? border:1px solid #ccc;/*設(shè)置邊框?qū)挾龋瑯邮剑▽?shí)線、虛線、點(diǎn)線），顏色*/
? ? }
? ? .content-wrap{
? ? position:relative;/*相對(duì)定位*/
? ? }
? ? .content-wrap>li{
? ? width:100%;
? ? height:100%;
? ? background:#CAE1FF;
? ? color:red;
? ? float:right;
? ? overflow:hidden;
? ? position:relative;/*相對(duì)定位*/
? ? }
? ? /*CSS3：選取li的第二個(gè)標(biāo)簽*/
? ? li:nth-child(2){
? ? background: #9BCD9B;
? ? }
? ? /*CSS3：選取li的第三個(gè)標(biāo)簽*/
? ? li:nth-child(3){
? ? background: yellow;
? ? }
? ? button{
? ? width:100px;
? ? height:50px;
? ? }
? ? .button{
? ? position:absolute;
? ? bottom:0;
? ? }
? ? </style>
? ??
? </head>
??
? <body>
? ? <div id="content">
? ? <ul class="content-wrap">
? ? <li>頁面一</li>
? ? <li>頁面二</li>
? ? <li>頁面三</li>
? ? </ul>
? ? <div class="button">
? ? <button>點(diǎn)擊切換頁面</button>
? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? var container = $("#content");//div
? ? ? ? // 獲取第一個(gè)子節(jié)點(diǎn)
? ? ? ? var element = container.find(":first");//ul
? ? ? ? // li頁面數(shù)量
? ? ? ? var slides = element.find("li");//li
? ? ? ? // 獲取容器尺寸
? ? ? ? var width = container.width();
? ? ? ? var height = container.height();
? ? ? ? // 設(shè)置li頁面總寬度
? ? ? ? element.css({
? ? ? ? width:(slides.length*width)+'px',
? ? ? ? height:height+'px'
? ? ? ? });
? ? ? ? // 設(shè)置每一個(gè)頁面li的寬度
? ? ? ? $.each(slides,function(index){
? ? ? ? var slides=slides.eq(index);//獲取第幾個(gè)slides
? ? ? ? slides.css({
? ? ? ? width:width+'px',
? ? ? ? height:height+'px'
? ? ? ? });
? ? ? ? });
? ? ? ? // 綁定一個(gè)事件，觸發(fā)通過
? ? ? ? $('button').click(function() {
? ? ? ? ? ? // 在5秒的時(shí)間內(nèi)，移動(dòng)X的位置，為2個(gè)頁面單位
? ? ? ? ? ? element.css({
? ? ? ? ? ? ? ? 'transition-timing-function': 'linear',
? ? ? ? ? ? ? ? 'transition-duration': '5000ms',
? ? ? ? ? ? ? ? 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //設(shè)置頁面X軸移動(dòng)
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
? </body>
</html>
2019-09-09
運(yùn)行你的代碼的時(shí)候，提示錯(cuò)誤并沒有定義eq屬性，到代碼里查找錯(cuò)誤發(fā)現(xiàn)你定義了兩個(gè)相似的變量，也不是說兩個(gè)相似變量吧，就是用的時(shí)候發(fā)生沖突了。