jquery 如何获取div下面的ul下面的li下面的所有img
<div id="nr_buttom">
                <ul id="change">
                    <li>
                        <img  src="images/gg_h1.jpg" />
                    </li>
                    <li>
                        <img  src="images/gg_h2.jpg" />
                    </li>

                </ul>
            </div>

 如何获取这个div下面的所有img的src属性值,并更改src的值

2个回答

[code="javaSrcipt"]
$.each($('#nr_buttom').find('img'),function(index,img){
var oldSrc = $(this).attr('src');
$(this).attr('src',newSrc);
})
[/code]

$(#change li img)

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
现在已经拿到ul如何获取他的同胞Input输入框的值
<div class="col-sm-10"> <div id="imagListDiv" style="display: none;"></div> <ul id="imagListDiv_imgUl" class="list-inline"> <li> <img class="li_img_show" src="${imgUrl}"> <div class="removeDiv"> <span class="glyphicon glyphicon-remove removeDiv_span"> </div> </li> </ul> <form:input type="hidden" path="pictures" htmlEscape="false" maxlength="100" class="form-control "/> </div> 我需要点击这个li中图片来将图片信息保存在input框中,现在通过点击已经获取到li中img;那么如何将这个url存入input框中(input的name或id是没有传递的,需要通过父子关系进行获取赋值),如何通过父子关系给input框赋值
jQuery 轮播插件,如何绑定一组DIV实现跟IMG一样的轮播效果
网上摘的代码,简单的轮播jq 我想写一个新一组DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1 ,求助。。新手不懂改jQ,因为不懂js。。 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轮播效果图 </title> <script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } </style> <script type="text/javascript"> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, t = 3000; length = $('.slider-panel').length; $('.slider-panel:not(:first)').hide(); $('.slider-item:first').addClass('slider-item-selected'); $('.slider-page').hide(); $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } function stop() { clearInterval(interval); hasStarted = false; } start(); }); </script> </head> <body> <div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <img src="http://img4.imgtn.bdimg.com/it/u=533187501,2953408843&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="<img src="http://img5.imgtn.bdimg.com/it/u=1614013440,1930745513&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img3.imgtn.bdimg.com/it/u=1133907788,3208642985&fm=206&gp=0.jpg"> </li> </ul> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div> </body> </html> <body> </body> </html> ```
jQuery 轮播插件,如何绑定一个DIV实现跟IMG一样的轮播效果
网上摘的代码,简单的轮播jq 我想写一个新的DIV,绑定原来轮播div,跟原轮播div兄弟关系,但是能实现同步的轮播效果,显示轮播图1的时候同时显示新DIV1 ,求助。。新手不懂改jQ ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轮播效果图 </title> <script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } </style> <script type="text/javascript"> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, t = 3000; length = $('.slider-panel').length; $('.slider-panel:not(:first)').hide(); $('.slider-item:first').addClass('slider-item-selected'); $('.slider-page').hide(); $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } function stop() { clearInterval(interval); hasStarted = false; } start(); }); </script> </head> <body> <div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <img src="http://img4.imgtn.bdimg.com/it/u=533187501,2953408843&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="<img src="http://img5.imgtn.bdimg.com/it/u=1614013440,1930745513&fm=206&gp=0.jpg"> </li> <li class="slider-panel"> <img src="http://img3.imgtn.bdimg.com/it/u=1133907788,3208642985&fm=206&gp=0.jpg"> </li> </ul> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div> </body> </html> <body> </body> </html> ```
怎么把网页1的导航完美移植到网页2的轮播图上边的位置使导航和轮播图结合成一个网页
网页1带导航的 <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <title>山东金泽网络科技有限公司</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" /> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link href="css/simpleLightbox.css" rel='stylesheet' type='text/css' /> <link href="css/fontawesome-all.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Poppins:100i,200,200i,300,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet"> </head> <body> <header> <div class="header_top" id="home"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <a class="navbar-brand" href="index.html"> <i class="fab fa-digital-ocean"></i> 金泽科技</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto tp-nav text-center"> <li class="nav-item active"> <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="了解银豹.html">解决方案</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">博客</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">联系我们</a> </li> </ul> <form action="#" method="post" class="form-inline my-2 my-lg-0 search"> <input class="form-control mr-sm-2" type="search" placeholder="点击输入搜索..." name="Search" required> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> </div> </nav> </div> </header> <!--//header--> </body> </html> ``` 网页2 轮播图代码: ``` <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>山东金泽网络科技有限公司</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="c-banner"> <div class="banner"> <ul> <li><img src="img/lunbo1.jpg"></li> <li><img src="img/lunbo2.jpg"></li> <li><img src="img/lunbo3.jpg"></li> </ul> </div> <div class="nexImg"> <img src="img/nexImg.png" /> </div> <div class="preImg"> <img src="img/preImg.png" /> </div> <div class="jumpBtn"> <ul> <li jumpImg="0"></li> <li jumpImg="1"></li> <li jumpImg="2"></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> //定时器返回值 var time=null; //记录当前位子 var nexImg = 0; //用于获取轮播图图片个数 var imgLength = $(".c-banner .banner ul li").length; //当时动态数据的时候使用,上面那个删除 // var imgLength =0; //设置底部第一个按钮样式 $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //页面加载 $(document).ready(function(){ // dynamicData(); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }); //点击上一张 $(".preImg").click(function(){ //清楚定时器 clearInterval(time); var nowImg = nexImg; nexImg = nexImg-1; console.log(nexImg); if(nexImg<0){ nexImg=imgLength-1; } //底部按钮样式设置 $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nowImg).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); //轮播淡入淡出 $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){ $(".c-banner ul li").eq(nowImg).css("display","none"); }); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }) //点击下一张 $(".nexImg").click(function(){ clearInterval(time); intervalImg(); time =setInterval(intervalImg,3000); }) //轮播图 function intervalImg(){ if(nexImg<imgLength-1){ nexImg++; }else{ nexImg=0; } //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){ $(".c-banner .banner ul li").eq(nexImg-1).css("display","none"); }); $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); } //轮播图底下按钮 //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用 $(".c-banner .jumpBtn ul li").each(function(){ //为每个按钮定义点击事件 $(this).click(function(){ clearInterval(time); $(".c-banner .jumpBtn ul li").css("background-color","white"); jumpImg = $(this).attr("jumpImg"); if(jumpImg!=nexImg){ var after =$(".c-banner .banner ul li").eq(jumpImg); var befor =$(".c-banner .banner ul li").eq(nexImg); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); after.css("display","block"); after.stop().animate({"opacity":1},1000); befor.stop().animate({"opacity":0},1000,function(){ befor.css("display","none"); }); nexImg=jumpImg; } $(this).css("background-color","black"); time =setInterval(intervalImg,3000); }); }); //动态数据轮播图 //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据 // function dynamicData(){ // $.ajax({ // url:"js/test.json", // type:"get", // dataType:"json", // success:function(data){ // if(data.code==1){ // var data = data.data; // $.each(data,function(i){ // $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>'); // $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>') // }) // } // //获取图片总数量 // imgLength = $(".c-banner .banner ul li").length; // //为底部按钮定义单击事件 // $(".c-banner .jumpBtn ul li").each(function(){ // //为每个按钮定义点击事件 // $(this).click(function(){ // clearInterval(time); // $(".c-banner .jumpBtn ul li").css("background-color","white"); // jumpImg = $(this).attr("jumpImg"); // if(jumpImg!=nexImg){ // var after =$(".c-banner .banner ul li").eq(jumpImg); // var befor =$(".c-banner .banner ul li").eq(nexImg); // // //将当前图片试用绝对定位,下一张图片试用相对定位 // $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); // $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); // // after.css("display","block"); // after.stop().animate({"opacity":1},1000); // befor.stop().animate({"opacity":0},1000,function(){ // befor.css("display","none"); // }); // nexImg=jumpImg; // } // $(this).css("background-color","black"); // time =setInterval(intervalImg,3000); // }); // }); // } // }) // } </script> <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html> ``` ```
请求大佬支援!!!jQuery:为什么我的index()索引得到的结果都是偶数?
**我的index1和index2得到的都是偶数** ![图片说明](https://img-ask.csdn.net/upload/201905/06/1557128639_655362.png) ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝服装精品</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*清除原有页面所有边距*/ margin:0; padding:0; } div{/*定义left盒子*/ width: 500px; height: 500px; margin: 150px auto; border: 1px solid red; } #ulleft{ width: 50px; border-right: 1px solid red;/*添加左垂直分隔线*/ } #ulleft,#ulcenter{ float: left; } #ulright{ float: right; width: 50px; border-left:1px solid red;/*添加右垂直分隔线*/ } ul{ list-style: none;/*去除小圆点*/ } a{/*a标签处理*/ width: 50px; height: 98px; line-height: 100px;/*设置行高*/ text-align: center; display: block;/*设置为块级元素*/ text-decoration: none;/*去除下划线*/ } img{ width: 400px; height: 500px; /* display: none;隐藏图片*/ } </style> </head> <body> <div> <ul id="ulleft"> <li><a href="#">0</a></li><hr> <li><a href="#">1</a></li><hr> <li><a href="#">2</a></li><hr> <li><a href="#">3</a></li><hr> <li><a href="#">4</a></li> </ul> <ul id="ulcenter"> <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/2.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/5.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/鬼灭之刃/2.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/10.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/9.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/8.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/7.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/6.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/5.png" alt=""></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/3.png" alt=""></a></li> </ul> <ul id="ulright"> <li><a href="#">5</a></li><hr> <li><a href="#">6</a></li><hr> <li><a href="#">7</a></li><hr> <li><a href="#">8</a></li><hr> <li><a href="#">9</a></li> </ul> </div> </body> <script> // 需求1:给左边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏 // 需求1:给右边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏 $(function(){ // 需求1: $('#ulleft').find('li').mouseenter(function(){ var index1 = $(this).index();//获取当前鼠标移入的li标签索引(即为第几个li标签) console.log(index1); // 让中间索引对应的li显示,其他的li隐藏 $('#ulcenter li').eq(index1).show().siblings('li').hide(); }); $('#ulright').find('li').mouseenter(function(){ var index2 = $(this).index(); console.log(index2); $('#ulcenter li').eq(index2).show().siblings('li').hide(); }); }); </script> </html> ```
asp.net调用jqury失败,一直无法应用jqury插件
正常应该是![图片说明](https://img-ask.csdn.net/upload/201911/23/1574513764_767043.png) 但是一直无法应用js就变成了这样![图片说明](https://img-ask.csdn.net/upload/201911/23/1574513778_368569.png) using System.Web; using System.Web.Optimization; namespace Lin { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/Login/js").Include( "~/Scripts/Login.js")); bundles.Add(new ScriptBundle("~/Index/bootstrap").Include( "~/Scripts/bootstrap.js")); bundles.Add(new ScriptBundle("~/Index/easing").Include( "~/Scripts/easing.js")); bundles.Add(new ScriptBundle("~/Index/jquery").Include( "~/Scripts/jquery-1.11.1.min.js")); bundles.Add(new ScriptBundle("~/Index/circlechart").Include( "~/Scripts/jquery.circlechart.js")); bundles.Add(new ScriptBundle("~/Index/flexslider").Include( "~/Scripts/jquery.flexslider.js")); bundles.Add(new ScriptBundle("~/Index/flipster").Include( "~/Scripts/jquery.flipster.js")); bundles.Add(new ScriptBundle("~/Index/jzBox").Include( "~/Scripts/jzBox.js")); bundles.Add(new ScriptBundle("~/Index/move-top").Include( "~/Scripts/move-top.js")); bundles.Add(new ScriptBundle("~/Index/SmoothScroll").Include( "~/Scripts/SmoothScroll.min.js")); bundles.Add(new StyleBundle("~/Login/css").Include( "~/Content/style_login.css")); bundles.Add(new StyleBundle("~/Index/fonts_1").Include( "~/Content/fonts_1.css")); bundles.Add(new StyleBundle("~/Index/fonts_2").Include( "~/Content/fonts_2.css")); bundles.Add(new StyleBundle("~/Index/bootstrap").Include( "~/Content/bootstrap.css")); bundles.Add(new StyleBundle("~/Index/flexslider").Include( "~/Content/flexslider.css")); bundles.Add(new StyleBundle("~/Index/flipster").Include( "~/Content/jquery.flipster.css")); bundles.Add(new StyleBundle("~/Index/style").Include( "~/Content/style.css")); } } } @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> <!-- Custom Theme files --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- //Custom Theme files --> @Styles.Render("~/Index/bootstrap") @Styles.Render("~/Index/style") @Styl @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>About</title> <!-- Custom Theme files --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- //Custom Theme files --> @Styles.Render("~/Index/bootstrap") @Styles.Render("~/Index/style") @Styles.Render("~/Index/flipster") <!-- js --> @Scripts.Render("~/Index/jquery") @Scripts.Render("~/Index/SmoothScroll") <!-- //js --> <!-- web-fonts --> @Styles.Render("~/Index/fonts_1") @Styles.Render("~/Index/fonts_2") <!-- //web-fonts --> <!-- start-smooth-scrolling --> @Scripts.Render("~/Index/move-top") @Scripts.Render("~/Index/easing") <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> <!-- //end-smooth-scrolling --> </head> <body> <!-- header --> <div class="header"> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1><a href="index.html">FTG格斗之家</a></h1> </div> <!-- top-nav --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html" class="active">首页</a></li> <li><a href="about.html">我们</a></li> <li><a href="gallery.html">画廊</a></li> <li><a href="contact.html">联系我们</a></li> <li><a href="#">我的课程</a></li> <li><a href="#">注销</a></li> </ul> <div class="clearfix"> </div> </div> </nav> </div> </div> <!-- //header --> <!-- banner --> <div class="banner about-banner"> <div class="container"> <div class="banner-text"> <h2>About FTG</h2> </div> </div> </div> <!-- //banner --> <!-- about --> <div class="about agileits"> <div class="container"> <div class="w3ls-title"> <h3>关于我们</h3> </div> <div class="about-w3ls-row"> <div class="col-md-4 about-left"> <div class="pic"> <div class="stack twisted"> <img src="~/images/img2.jpg" alt=" " class="img-responsive"> </div> </div> </div> <div class="col-md-8 about-right"> <h5>FTG </h5> <p>我们致力于打造一个集训练与交流的一流俱乐部,我们在这里等待你的加入,我们期待你的加入。 </p> <!-- history --> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title asd"> <a class="pa_italic" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 格斗爱好者聚集地 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body panel_text"> 我们提供一流的服务给各位爱好格斗的朋友们,我们拥有舒适的场地,宽敞的格斗台,以及良好的交流环境,并且有免费的温泉。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title asd"> <a class="pa_italic collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 专业教学 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body panel_text"> 如果您是初学者,不要担心,我们有专业的教练,配备有专业设施,并且有多项课程可以选择,根据自身基础进行选择。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title asd"> <a class="pa_italic collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 我们的优势 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body panel_text"> 在这里没有教练与学员,我们的教练全部都是专业资深培训师,但是他们与学员之间只有朋友关系,会以一个朋友的姿态来教学。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title asd"> <a class="pa_italic collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 如何加入我们 </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body panel_text"> 可以直接来我们的俱乐部,我们会有引导人员,进行引导参观,我们的俱乐部全国连锁,具体地址可电188 8888 8888询问。 </div> </div> </div> </div> <!-- //history --> </div> <div class="clearfix"> </div> </div> </div> </div> <!-- //about --> <!-- about-slid --> <div class="about-slid"> <div class="container"> <div class="flipster"> <ul> <li> <div class="pricing"> <div class="pricing-top "> <h3>专项计划</h3> <p>$3000/月</p> </div> <div class="pricing-bottom"> <div class="pricing-bottom-top"> <p>泰拳类 : 6.00am - 7.00am</p> <p>健身房 : 7.05am - 8.00am</p> <p>举重类 : 8.05am - 9.00am </p> <p>自由搏击 : 9.05am - 10.00am</p> </div> <div class="pricing-bottom-bottom"> <p><span>HOT</span> Plan</p> </div> <div class="buy-button"> <a href="#">现在加入</a> </div> </div> </div> </li> <li> <div class="pricing"> <div class="pricing-top top-two"> <h3>基本计划</h3> <p>$500/月</p> </div> <div class="pricing-bottom"> <div class="pricing-bottom-top"> <p>泰拳 : 6.00am - 7.00am</p> <p class="display-none">健身房 : 7.05am - 8.00am</p> <p class="display-none">举重类 : 8.05am - 9.00am </p> <p class="display-none">自由搏击 : 9.05am - 10.00am</p> </div> <div class="pricing-bottom-bottom"> <p><span>A</span> Plan</p> </div> <div class="buy-button"> <a href="#">现在加入</a> </div> </div> </div> </li> <li> <div class="pricing"> <div class="pricing-top top-three"> <h3>标准计划</h3> <p>$1000/月</p> </div> <div class="pricing-bottom"> <div class="pricing-bottom-top"> <p>泰拳类 : 6.00am - 7.00am</p> <p>健身房 : 7.05am - 8.00am</p> <p class="display-none">举重类 : 8.05am - 9.00am </p> <p class="display-none">自由搏击 : 9.05am - 10.00am</p> </div> <div class="pricing-bottom-bottom"> <p><span>S</span> Plan</p> </div> <div class="buy-button"> <a href="#">现在加入</a> </div> </div> </div> </li> <li> <div class="pricing"> <div class="pricing-top top-four"> <h3>高级计划</h3> <p>$1300/月</p> </div> <div class="pricing-bottom"> <div class="pricing-bottom-top"> <p>泰拳类 : 6.00am - 7.00am</p> <p>健身房 : 7.05am - 8.00am</p> <p>举重类 : 8.05am - 9.00am </p> <p class="display-none">自由搏击 : 9.05am - 10.00am</p> </div> <div class="pricing-bottom-bottom"> <p><span>SS </span>Plan</p> </div> <div class="buy-button"> <a href="#">现在加入</a> </div> </div> </div> </li> <li> <div class="pricing"> <div class="pricing-top top-five"> <h3>快速计划</h3> <p>$2000/月</p> </div> <div class="pricing-bottom"> <div class="pricing-bottom-top"> <p>泰拳类 : 5.00am - 7.00am</p> <p>健身房 : 7.05am - 8.00am</p> <p>举重类 : 8.05am - 9.00am </p> <p>自由搏击 : 9.05am - 10.00am</p> </div> <div class="pricing-bottom-bottom"> <p><span>HOT</span> Plan</p> </div> <div class="buy-button"> <a href="#">现在加入</a> </div> </div> </div> </li> </ul> </div> @Scripts.Render("~/Index/flipster") <script> $(function () { $(".flipster").flipster({ style: 'carousel', start: 0 }); }); </script> </div> </div> <!-- //about-slid --> <!-- team --> <div class="team agileits"> <div class="team-info"> <div class="container"> <div class="w3ls-title"> <h3>我们的培训师</h3> </div> <div class="team-row"> <div class="col-md-3 team-grids"> <div class="team-img"> <img class="img-responsive" src="images/t1.jpg" alt=""> <div class="captn"> <div class="captn-top"> <h4>罗伯特·凯</h4> </div> <div class="social-icons"> <p>只有不肯做没有做不到</p> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="col-md-3 team-grids"> <div class="team-img"> <img class="img-responsive" src="images/t2.jpg" alt=""> <div class="captn"> <div class="captn-top"> <h4>玛丽·莲</h4> </div> <div class="social-icons"> <p>我们不比任何人差</p> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="col-md-3 team-grids"> <div class="team-img"> <img class="img-responsive" src="images/t3.jpg" alt=""> <div class="captn"> <div class="captn-top"> <h4>康斯坦丁</h4> </div> <div class="social-icons"> <p>你想来,我便等着你</p> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="col-md-3 team-grids"> <div class="team-img"> <img class="img-responsive" src="images/t4.jpg" alt=""> <div class="captn"> <div class="captn-top"> <h4>琼斯·露</h4> </div> <div class="social-icons"> <p>只要有心,没有做不到的</p> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> <!-- //team --> <!-- map --> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.9503398796587!2d-73.9940307!3d40.719109700000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1441710758555"></iframe> <div class="address agileits"> <div class="w3ls-title"> <h3>GET IN TOUCH</h3> </div> <p>林, CH 10000, 杭州. </p> <p>手机 : 188 8888 8888</p> <p>QQ : 8888 8888 8</p> <p>Email : <a href="mailto:example@qq.com">888888888@qq.com</a></p> </div> </div> <!-- //map --> <!-- footer --> <div class="footer"> <div class="container"> <h3><a href="index.html">FTG格斗之家</a></h3> <p>我们期待着你的到来</p> </div> </div> <!-- //footer --> <!-- smooth-scrolling-of-move-up --> <script type="text/javascript"> $(document).ready(function () { var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> <!-- //smooth-scrolling-of-move-up --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> @Scripts.Render("~/Index/bootstrap") </body> </html> **_其中@Scripts.Render("~/Index/flipster") @Scripts.Render("~/Index/jquery")一直应用不上**_
求教:怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏?
怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏? 代码: <div data-v-4a1fb872="" data-v-311834f5="" class="wrapper"> <div data-v-4a1fb872="" class="bg-left" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/index2bg.2dead38.png)"> </div> <div data-v-4a1fb872="" class="part"> <div data-v-4a1fb872="" class="phone" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/phone.1a1ffa5.png)"> <div data-v-4a1fb872="" class="phone-img"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-1.514b9e5.png" alt=""> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-2.fe2440c.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-3.61fa415.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-1.77e24af.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-2.03c77b0.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-3.68454c5.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-1.378751a.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-2.5415338.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-3.3522ddc.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-1.80e2eb2.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-2.67cb670.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-3.dc4d534.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-4.2cbe036.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-1.11fab89.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-2.2b657e7.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-3.f4f1d4b.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-4.4752a09.png" alt="" style="display: none;"> </div> </div> <div data-v-4a1fb872="" class="number"> 02 </div> <div data-v-4a1fb872="" class="con"> <div data-v-4a1fb872="" class="title"> 为销售赋能的小名片 </div> <div data-v-4a1fb872="" class="mark"> 产品展示 </div> <ul data-v-4a1fb872="" class="list"> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon1"> </div> <div data-v-4a1fb872="" class="name"> 小名片展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 统一公司形象,全员分享,小名片直达企业官网,产品、服务的展现 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="0" class="link-item"> 名片信息 </div> <div data-v-4a1fb872="" data-index="1" class="link-item"> 个人信息 </div> <div data-v-4a1fb872="" data-index="2" class="link-item"> 更多信息 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon2"> </div> <div data-v-4a1fb872="" class="name"> 绑定小官网 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 企业官网、产品、服务的完整展现 </p> <p data-v-4a1fb872=""> 帮助访客第一时间了解企业,更快促成业务交流 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="3" class="link-item"> 查看名片 </div> <div data-v-4a1fb872="" data-index="4" class="link-item"> 查看企业小官网 </div> <div data-v-4a1fb872="" data-index="5" class="link-item"> 小官网多样式介绍 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon3"> </div> <div data-v-4a1fb872="" class="name"> 销售雷达展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 访问消息实时推送,名片访客即客户,不加好友就可微信沟通不错过每个商机;探测访客访问动态,让销售沟通更高效 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="6" class="link-item"> 实时推送访客消息 </div> <div data-v-4a1fb872="" data-index="7" class="link-item"> 不加微信好友沟通 </div> <div data-v-4a1fb872="" data-index="8" class="link-item"> 即时聊天 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon4"> </div> <div data-v-4a1fb872="" class="name"> 智能AI分析 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 分析客户兴趣与活跃度,挖掘深度用户 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="9" class="link-item"> 访客数据分析 </div> <div data-v-4a1fb872="" data-index="10" class="link-item"> 访客互动情况 </div> <div data-v-4a1fb872="" data-index="11" class="link-item"> 销售人员能力分析 </div> <div data-v-4a1fb872="" data-index="12" class="link-item"> 销售详情分析 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon5"> </div> <div data-v-4a1fb872="" class="name"> 商机SCRM </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 助销售进行客户标签化管理,客户跟进记录管理,客户AI分析 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="13" class="link-item"> 商机标签化管理 </div> <div data-v-4a1fb872="" data-index="14" class="link-item"> 销售跟进记录 </div> <div data-v-4a1fb872="" data-index="15" class="link-item"> 客户访问轨迹 </div> <div data-v-4a1fb872="" data-index="16" class="link-item"> 客户兴趣分析 </div> </div> </div> </li> </ul> </div> </div> </div> ``` ``` 刚毕业的实习生,在网上扒的网站,但是js没有用,我也没学过js;求教怎么解决? css代码太多了,我也不知道拿那一部分所以就不放了, 这个网站就是我复制的网站 www.xcxzhan.com 里面可以拿到css,js 可以拿下来,但是不知道为什么没有用。 求大佬教学!!!跪谢!!!
ie6下 jquery的click失效
下面代码,在其他浏览器下可以,ie6下没有反应,请大家帮帮忙,看看怎么回事? <div class="lijigoumai"> <ul> <li> <a class="shoppingCart" id="<%#Eval("productId") %>" href="javascript:void(0);"><img src="images/jiaru.gif" /></a> </li> </ul> </div> $(".shoppingCart").bind("click",function () { alert("aa"); }) 也试过 $(".shoppingCart").click(function () { alert("aa"); })
新手上路,求教jquery知识
<html> <head> <title>图片轮播</title> <meta charset="utf-8"> <style type="text/css"> div{ border:1px solid black; width:500px; height:210px; margin:0 auto; position:relative; overflow:hidden; padding:0 0; } img{ width:500px; height:200px; position:relative; align:center; padding:0 0; margin:0 0; } ul{ padding:0 0; margin:0 0; } ul li{ list-style-type:none; padding:0; padding:0 0; margin:0 0; } #num{ position:absolute; right:5px; bottom:0px; padding:0; } #num li{ width:20px; height:20px; border:1px solid black; float:left; background-color:red; margin-left:5px; text-align:center; } </style> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ var a1; var index=0; var timer; timer = setInterval(function(){ for(var i=0;i<5;i++){ a1=i*200+7; $("img").animate({bottom:a1+"px"},2000); if(i==5){ $("img").animate({bottom:"0px"},2000); } } },10000); $("div").hover(function() { clearInterval(timer); }, function(){}).trigger("mouseleave"); }); </script> </head> <body> <div id="scr"> <ul id="adv"> <li><img src=images/LoadScreen_8.jpg></li> <li><img src=images/LoadScreen_10.jpg></li> <li><img src=images/LoadScreen_11.jpg></li> <li><img src=images/LoadScreen_12.jpg></li> <li><img src=images/LoadScreen_16.jpg</li> </ul> <ul id="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html> 自己用jquery写的图片轮播的代码,鼠标悬停停不了啊,求解
vue v-for循环和瀑布流插件masonry冲突 请问怎么解决
``` <ul class="newsLeft" id="masonry"> <li v-for="as in products.article_list" class="newsList grid-item"> <div class="titBar"><i class="icon"><img src="images/2.png"/></i><span>新闻<p>2019年11月3日 14:30:00</p></span><div class="follow">+ 关注</div></div> <a :href="as.url" target="_blank"><img class="newsImg" :src="as.list_pics" :alt="as.list_title"/></a> <div class="textBar"> <span><a :href="as.url" target="_blank">{{as.list_title}}</a></span> <p>{{as.summary}}</p> <div class="topic"><i class="icon">#</i><span>#潜水者与柠檬鲨#</span></div> </div> </li> </ul> ``` 如果用了vue调用数据,masonry则无法初始化数据 算出高度和位置。 ``` container.imagesLoaded(function() { container.masonry({ // columnWidth: 35, itemSelector: '.grid-item', isFitWidth: false, //是否根据浏览器窗口大小自动适应默认false isAnimated: true, //是否采用jquery动画进行重拍版 isRTL: false, //设置布局的排列方式,即:定位砖块时,是从左向右排列还是从右向左排列。默认值为false,即从左向右 isResizable: true, //是否自动布局默认true animationOptions: { duration: 800, easing: 'easeInOutBack', //如果你引用了jQeasing这里就可以添加对应的动态动画效果,如果没引用删除这行,默认是匀速变化 queue: false //是否队列,从一点填充瀑布流 } }); }); ```
jquery 做tab切换时如何使样式保持不变
默认的选项,下面的边框是包含元素的,如图 ![图片说明](https://img-ask.csdn.net/upload/201612/05/1480917210_477760.png) 切换选项后,元素跑到边框外面了, 如图: ![图片说明](https://img-ask.csdn.net/upload/201612/05/1480917290_55966.png) 如何才能使元素在边框里面? body{font-size: 14px;} li{margin:0;padding:0;border:0;list-style: none;} #dialog_select_blocks2 {text-align: center;} #dialog_select_blocks2 #selected_blocks{width: 480px;height:auto;margin: 5px auto; border: 1px solid #ccc;display:inline-block;} #dialog_select_blocks2 #selected_blocks ul{margin: 0; height: auto;} #dialog_select_blocks2 #selected_blocks ul li{width:100px; border:1px solid #5c9ccc; color:#5c9ccc; height:24px; line-height:24px;padding:0 5px; margin:5px 5px; float:left; color:#5c9ccc;} #dialog_select_blocks2 #block_tabs{width: 480px; margin: 0 auto; border: 1px solid #ccc;} #dialog_select_blocks2 #block_tabs #tab_panel .hide{display: none;} #dialog_select_blocks2 #block_tabs #tab_opt .selected{background-color: #eee;} #dialog_select_blocks2 #block_tabs #tab_opt{width:100%; float: left;margin: 0;padding: 0;position: relative;} #dialog_select_blocks2 #block_tabs #tab_opt li{width:80px; height:24px;border:1px solid #ccc; border-bottom:0px;margin: 0 2px; float: left; cursor:pointer; background-color: #bbb;} #dialog_select_blocks2 #block_tabs #tab_panel{width: 480px; clear: both; padding: 5px 0;} #dialog_select_blocks2 #block_tabs #tab_panel div{display: inline-block;} #dialog_select_blocks2 #block_tabs #tab_panel div ul li{width: 100px; width:100px; border:1px solid #5c9ccc;color:#5c9ccc; height:24px; line-height:24px;padding:0 5px; margin:5px 5px; float:left; color:#5c9ccc; } </style> <script type="text/javascript"> $(function(){ $("#block_tabs ul li").each(function(){ $(this).click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); var index = $(this).index(); $("#tab_panel > div").eq(index).show().siblings().hide(); }); }); }); </script> </head> <body> <div id="dialog_select_blocks2" class="ctrl_dialog" title="板块选择对话框"> <div id="selected_blocks"> <ul> <li class="block_item">苹果</li> <li class="block_item">香蕉</li> <li class="block_item">桃子</li> </ul> </div> <div id="block_tabs"> <ul id="tab_opt"> <li class="selected">A</li> <li>B</li> <li>N</li> </ul> <div id="tab_panel"> <div id="block_a"> <ul> <li class="block_item">苹果</li> <li class="block_item">桃子</li> <li class="block_item">西瓜</li> <li class="block_item">香蕉</li> <li class="block_item">柚子</li> </ul> </div> <div id="block_b" class="hide"> <ul> <li class="block_item">小狗</li> <li class="block_item">小猫</li> <li class="block_item">小猪</li> </ul> </div> <div id="block_n" class="hide"> <ul> <li class="block_item">兰花</li> <li class="block_item">荷花</li> <li class="block_item">牡丹</li> </ul> </div> </div> </div> </div> ``` ```
关于用jquery做的轮播图
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图展示</title> <style> * { padding: 0; margin: 0; border: none; list-style: none; } .box{ width:100%; height: 340px; position: relative; overflow: hidden; } .box ul{ position: relative; width:500%; height: 340px; } .box ul li{ float: left; width:20%; height:100%; z-index: 1; } li img{ width:100%; height:100%; } span{ width: 50px; height: 50px; font-size:180px; position: absolute; color: white; z-index: 4; } span:nth-of-type(1){ left: 50px; } span:nth-of-type(2){ right: 100px; } </style> </head> <body> <div class="box"> <span>&lt;</span> <span>&gt;</span> <ul> <li><img src="images/01.png" alt=""></li> <li><img src="images/02.png" alt=""></li> <li><img src="images/03.png" alt=""></li> <li><img src="images/04.png" alt=""></li> <li><img src="images/01.png" alt=""></li> </ul> </div> <script src="js/jquery-3.1.1.js"></script> <script> $(function (){ function moveL(){ $("ul").stop().animate({ left:"-="+parseInt($(".box").width())+"px" }); if($("ul").position().left<=-4*$(".box").width()){ $("ul").css("left",0); } } function moveR(){ $("ul").animate({ left:"+=1000px" }) } var timer = setInterval(moveL,1000); }) </script> </body> </html> ``` 代码是这些,问题很奇怪,当轮播到临界值的时候,css赋值left为0的时候会失败,通过输出left的值确实为0,可是图片竟然不会回到原位,如果把浏览器切换一下,就是最小化个1秒后打开就可以了,很莫名其妙,有大神懂吗
jquery 的load()方法,不执行页面的js???
我点击按钮的时候,会执行 load(url)这个方法,比方url是aa.jsp,但我使用这个方法的时候,aa.jsp的js没有触发 全部失效,为甚么?? 怎样才能触发url所在的js。。。 ``` <!-- Nav tabs --> <ul class="nav nav-tabs imglist" role="tablist" id="maintab"> <li class="active"><a href="#main_tab1" onclick='showPage("main_tab1","trainee-info.htm")' ><div class="showContent"> <img src="img/myfile/ABOUT.png" height="30" /> <span>ABOUT</span></div></a></li> <li><a href="#main_tab2" onclick='showPage("main_tab2","sfunction-calendar.htm")' > <div class="showContent"><img src="img/myfile/MY_TRAINING_SCHEDULE.png" height="30" /> <span>#springMessage("sub-menu-tfunction-calendar") </span></div></a></li> <li><a href="#main_tab3" onclick='showPage("main_tab3","sfunction-my-course.htm")' ><div class="showContent"> <img src="img/myfile/MY_COURSES.png" height="30" /> <span>#springMessage("sub-menu-sfunction-my-course") </span></div></a></li> #if($!myTeamFlag==1) <li><a href="#main_tab4" onclick='showPage("main_tab4","my-team.htm")' > <div class="showContent"><img src="img/myfile/MY_TEAM.png" height="30" /> <span>#springMessage("sub-menu-my-team")</span></div></a></li> #end #if($!storeChartFlag==1) <li><a href="#main_tab5" onclick='showPage("main_tab5","my-group.htm")' class="authority" for-role="ROLE_HR(HO),ROLE_TSC/TC,ROLE_System Admin,ROLE_StoreHr" ><div class="showContent"> <img src="img/myfile/STORE-CHART.png" height="30" /> <span>#springMessage("sub-menu-my-group") </span></div></a></li> #end </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="main_tab1"></div> <div class="tab-pane" id="main_tab2"></div> <div class="tab-pane" id="main_tab3"></div> <div class="tab-pane" id="main_tab4"></div> <div class="tab-pane" id="main_tab5"></div> </div> <script language="javascript"> var loadimg="/img/tab-loding.gif"; // 加载时的loading图片 $(function(){ showPage("main_tab1","trainee-info.htm"); }) function showPage(tabId, url){ $('#maintab a[href="#'+tabId+'"]').tab('show'); // 显示点击的tab页面 $('#'+tabId).html('<br> <img src='+loadimg+' /> #springMessage('page-loading')'); $('#'+tabId).load(url); // ajax加载页面 } </script> ```
Jquery 瀑布流应用,怎么把它和数据库对接
``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jQuery Wookmark Plug-in Example</title> <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in."> <meta name="author" content="Christoph Ono, Sebastian Helzle"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- CSS Reset --> <link rel="stylesheet" href="../css/reset.css"> <!-- Global CSS for the page and tiles --> <link rel="stylesheet" href="../css/main.css"> </head> <body> <div id="container"> <header> <h1>jQuery Wookmark Plug-in Example</h1> <p>Scroll down to see the infinite scroll effect.</p> </header> <div id="main" role="main"> <ul id="tiles"> <!-- These are our grid blocks --> <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li> <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li> <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li> <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li> <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li> <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li> <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li> <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li> <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li> <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li> <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li> <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li> <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li> <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li> <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li> <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li> <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li> <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li> <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li> <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li> <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li> <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li> <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li> <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li> <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li> <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li> <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li> <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li> <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li> <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li> <!-- End of grid blocks --> </ul> </div> <footer> </footer> </div> <!-- include jQuery --> <script src="../libs/jquery.min.js"></script> <!-- Include the imagesLoaded plug-in --> <script src="../libs/jquery.imagesloaded.js"></script> <!-- Include the plug-in --> <script src="../jquery.wookmark.js"></script> <!-- Once the page is loaded, initalize the plug-in. --> <script type="text/javascript"> (function ($){ var $tiles = $('#tiles'), $handler = $('li', $tiles), $main = $('#main'), $window = $(window), $document = $(document), options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $main, // Optional, used for some extra CSS styling offset: 20, // Optional, the distance between grid items 图片与图片之间的间距 itemWidth: 210 // Optional, the width of a grid item 太小的话图片与图片会叠加 }; /** * Reinitializes the wookmark handler after all images have loaded */ function applyLayout() { $tiles.imagesLoaded(function() { // Destroy the old handler if ($handler.wookmarkInstance) { $handler.wookmarkInstance.clear(); } // Create a new layout handler. $handler = $('li', $tiles); $handler.wookmark(options); }); } /** * When scrolled all the way to the bottom, add more tiles */ function onScroll() { // Check if we're within 100 pixels of the bottom edge of the broser window. var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100); if (closeToBottom) { // Get the first then items from the grid, clone them, and add them to the bottom of the grid var $items = $('li', $tiles), $firstTen = $items.slice(0, 10); $tiles.append($firstTen.clone()); applyLayout(); } }; // Call the layout function for the first time applyLayout(); // Capture scroll event. $window.bind('scroll.wookmark', onScroll); })(jQuery); </script> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201501/11/1420941795_765950.png) 我想要的瀑布流是从数据库里读取,但网页进来时不会显示全部图片,往下滑动时才会显示其他图片。而这种它一次就把所有图片读取,滑动到底部也只是重复一遍而已。
li标签无法正常显示,display值为none
1 代码 ``` <style> .ck-slide{ width:720px; } .ck-slide-wrapper{ height: 100%; } </style> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <script src="../github/myck_slide-master/js/myslide.js"> </script> <script> /* $(".ck-slide").ckSlide({ autoPlay:true })*/ </script> </div> //引入的外部样式 * { margin: 0px; padding: 0px; } .ck-slide { margin: 100px 0 0 0; left: 50%; margin-left: -400px; width:800px; position: relative; } .ck-slide .ck-slide-wrapper { top: 0; left: 0; z-index: 1; width:100%; position: absolute; } .ck-slide-wrapper li{ list-style: none; display: block; } ``` 2 显示效果 ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576361_55061.png) ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576370_818515.png) 3 问题 想实现的效果是轮播。 上述代码在浏览器中打开的时候可以正常显示第一章图片。 按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀 ------------------------------------------------------------- # **有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/slide.css"> <script src="./js/jquery.min.js"></script> <style> .ck-slide{ width:720px; height:320px; } .ck-slide-wrapper{ height: 100%; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slideBox"> <div class="slideWrap"> <ul> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> </ul> </div> </div> </div> </body> </html> ``` 使用到的图片 ![图片说明](https://img-ask.csdn.net/upload/201610/29/1477732376_480707.jpg) 感谢给位朋友的指点!
两个JQuery问题,一个是收缩展开的代码、一个是完整全选的代码
``` <script type="text/javascript"> // 收缩展开效果 $(document).ready(function(){ $("a.click").toggle( function() { $(this).parent().next("ul").show('fast'); }, function() { $(this).parent().next("ul").hide('slow'); }); }); </script> <ul class="sortSub" id="sortSub"> <li> <a class="click"><span></span>相机配件</a> <ul id="ul1"> <li><a href="../../list.html">支架</a></li> <li><a href="../../list.html">机身附件</a></li> <li><a href="../../list.html">清洁用品</a></li> <li><a href="../../list.html">滤镜</a></li> <li><a href="../../list.html">电池-充电器</a></li> <li><a href="../../list.html">相机包</a></li> <li><a href="../../list.html">镜头</a></li> <li><a href="../../list.html">闪光灯</a></li> </ul> </li> <li> <a class="click"><span></span>手机数码配件</a> <ul> <li><a href="../../list.html">贴膜</a></li> <li><a href="../../list.html">存储卡</a></li> <li><a href="../../list.html">手机壳-保护壳</a></li> <li><a href="../../list.html">数据线</a></li> <li><a href="../../list.html">电池-充电器</a></li> <li><a href="../../list.html">移动电源</a></li> <li><a href="../../list.html">蓝牙耳机</a></li> <li><a href="../../list.html">读卡器</a></li> <li><a href="../../list.html">其他配件</a></li> </ul> </li> <li> <a class="click"><span></span>摄像摄影</a> <ul> <li><a href="../../list.html">单反相机</a></li> <li><a href="../../list.html">单电-微单相机</a></li> <li><a href="../../list.html">拍立得</a></li> <li><a href="../../list.html">摄像机</a></li> <li><a href="../../list.html">数码相机</a></li> </ul> </li> <li> <a class="click"><span></span>数码影音</a> <ul> <li><a href="../../list.html">MP3-MP4随身听</a></li> <li><a href="../../list.html">mini音响</a></li> <li><a href="../../list.html">录音笔</a></li> <li><a href="../../list.html">数码相框</a></li> <li><a href="../../list.html">耳机-耳麦</a></li> <li><a href="../../list.html">高清播放器</a></li> <li><a href="../../list.html">麦克风-话筒</a></li> </ul> </li> <li> <a class="click"><span></span>其他电子</a> <ul> <li><a href="../../list.html">学习机</a></li> <li><a href="../../list.html">对讲机</a></li> <li><a href="../../list.html">收音机</a></li> <li><a href="../../list.html">电子书</a></li> </ul> </li> </ul> ``` 这个总是点击一个展开链接,其他的就都一起展开或者收缩了。 ``` <script> $(function(){ //单独选择某一个 $("input[name='check_item']").click(function(){ var index=$("input[name='check_item']").index(this); $("input[name='check_item']").eq(index).toggleClass("checked");//伪复选 }); //全选 $("#check_all,#box_all").click(function(){ $("input[name='check_item']").attr("checked",$(this).attr("checked")); $("input[name='check_item'],#check_all,#box_all").toggleClass("checked"); }); }); $(function () { //全选或全不选 $("#box_all").click(function(){ if(this.checked){ $("#list :checkbox").attr("checked", true); }else{ $("#list :checkbox").attr("checked", false); } }); }); function allchk(){ var chknum = $("#list :checkbox").size();//选项总个数 var chk = 0; $("#list :checkbox").each(function () { if($(this).attr("checked")==true){ chk++; } }); if(chknum==chk){//全选 $("#box_all").attr("checked",true); }else{//不全选 $("#box_all").attr("checked",false); } } </script> <section class="s-list cf" id="dataList"> <div class="wrap"> <form method="post" action="order.html"> <div class="container"> <div class="cart clear"> <div class="shadow"> <table width="100%" border="0"> <tr> <td width="85%"> <h5 class="fl">购买到的产品</h5></li> </td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_all" id="check_all" > </td> </tr> </table> <div class="c_list cb"> <ul> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> <li> <table> <tr> <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td> <td width="65%"> <p>新奇士脐橙,8斤,甜中带微</p> <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p> </td> <td width="10%" valign="middle"><a href="#" class="del">删除</a></td> <td width="10%"> <input type="checkbox" class="checkbox" name="check_item" id="check_item"></td> </tr> </table> </li> </ul> </div> </div> </div> </div> <div class="cart_bg"> <table width="100%" border="0"> <tr> <td width="3%"></td> <td width="25%"><input type="checkbox" class="checkbox" id="box_all"> 全选</td> <td width="49%"> <p> <span class="pl15">金额合计:</span><span class="ff6">¥198.00</span></p> </td> <td width="20%"><button class="submit">去结算</button></td> <td width="3%"></td> </tr> </table> </div> </form> </div> </section> ``` 全选这个我看不懂该怎么添加完整,判断是否全部被选中 求大神补完~~~~跪求
关于jquery 选择器的问题
我做了一个导航下拉列表,如图: ![](https://img-ask.csdn.net/upload/201611/22/1479791755_723568.png) 但是现在有个问题 就是我用选择器控制他显示和隐藏的时候有个问题代码 如下: ``` <script type="text/javascript"> ``` ``` $(function(){ $(".leftnav h2").click(function(){ alert("asdsad"); $(this).next().slideToggle(200); $(this).toggleClass("on"); }) $(".leftnav ul li a").click(function(){ $("#a_leader_txt").text($(this).text()); $(".leftnav ul li a").removeClass("on"); $(this).addClass("on"); }) }); </script> ``` 以下是 页面的 布局 但是 这个事件根本就没有进方法 ``` <div class="leftnav"> <div class="leftnav-title"><strong><span class="icon-list"></span>菜单列表</strong></div> <h2><span class="icon-user"></span>产品管理</h2> <ul style="display:block"> <li><a href="info.html" target="right"><span class="icon-caret-right"></span>产品修改</a></li><li><a href="cate.html" target="right"><span class="icon-caret-right"></span>产品删除</a></li><li><a href="cate.html" target="right"><span class="icon-caret-right"></span>产品添加</a></li></ul><h2><span class="icon-pencil-square-o"></span>公司信息管理</h2><ul> <li><a href="info.html" target="right"><span class="icon-caret-right"></span>公司介绍</a></li></ul><h2><span class="icon-pencil-square-o"></span>角色管理</h2><ul> <li><a href="info.html" target="right"><span class="icon-caret-right"></span>角色删除</a></li></ul></div> ```
jquery的click事件多次绑定
**.tools-comment是评论按钮的class名,点击它弹出回复评论层。添加回复内容,点发表,发表成功,将返回的数据写入页面中。此时不刷新页面,再次点击评论,发表,则一下发表了两条相同的数据,ajax请求了两次。第三次则发表三条......第N次发表N条。.editWindow-send就是弹出层上面的发表按钮的class名,代码如下,请大神帮看看是什么原因。** var topicid,artsid,articleid; $("#found").on("click",".tools-comment",function (){ //跳转评论 var tempHtml=''; var url="index.php?app=weixin&ac=wnote&ts=verifyUser"; $.ajax({ url:url, type:"get", async:false, datatype:"json", success:function(data) { var data=$.parseJSON(data); if(data.code==1) showEditWindow(); if(data.code==0) popWindowAlert(data.msg); if(data.code==4) location.href=data.ts_url; if(data.code==5) location.href=data.ts_url; } }); //这里需要记录当前点击是哪个话题 articleid=$(this).children(".docomment").attr("articleid"); artsid=$(this).children(".docomment").attr("artsid"); topicid=$(this).children(".docomment").attr("topicid"); if(articleid){ var url="index.php?app=weixin&ac=wnote&ts=addArticleComment"; $(".editWindow-send").on("click",function (){ var content=$("#ComentContent").val(); $.ajax({ url:url, type:"post", datatype:"json", async:false, data:{"articleid":articleid,"content":content}, success:function(data){ var data=$.parseJSON(data); //执行登陆跳转 if (data.status==800) { popWindowAlert(data.msg); } //执行成功返回跳转 if(data.status==1){ var htmlStr="<li class='reply-again' id="+data['res']['commentid']+" comment_id="+data['res']['commentid']+"><div class='ku_replyp delcomment' id="+data['res']['commentid']+" to_userid="+data['res']['commentid']+" comment_id="+data['res']['commentid']+"><div class='reply-photo'><a href='index.php?app=weixin&ac=wcircleZone&userid="+data['res']['userid']+"' class='ui-link'><img src='"+data['res']['face']+"'></a></div><div class='ku_replyp_text'>"+data['res']['username']+":</div> <div class='ku_replyp_con'>"+data['res']['content']+"</div></div><div class='reply-time'><div class='reply-time-l'>"+data['res']['addtime']+"</div> <div class='reply-time-r'> <ul><li class='glm-love'><i></i><span class='likenum'></span></li> <li class='glm-line'>|</li> <li class='comment-reply' to_comment_id='300' comment_id='300'><i></i></li> </ul></div> </div> <div class='reply-box-all'> </div><div class='clear'></div> <div class='br10'></div></li>"; $(".gl-replay-list").append(htmlStr); }else{ //执行失败 popWindowAlert(data.msg); } } }); }); } });
jquery+Ajax如何把菜单栏的id传递内容中去?
``` <script> $(function() { var qjbl={}; $.get('category.php','parent_id=0',function(msg){ $(msg).each(function(i,item){ $('#menu>ul').append('<li>'+item.cat_name+'</li>'); qjbl=item.cat_id; }); },'json'); $('#menu').bind('click',function() { $('#content').empty(); $.get('goods.php',qjbl,function(msg) { $(msg).each(function(i,item) { $('#content').append('<div style="float:left;width:20%;margin:5%;text-align:center;"><img src="'+item.goods_img+'"/>'+'<p>'+item.goods_name+'</p></div>'); }); },'json'); }); }); </script> </head> <body> <div id="container"> <div data-role="page" id="page"> <div data-role="header" data-icon="home" data-theme="a" data-mini="false"> <a href="#" data-role='button' data-rel="back">返回</a> <h1>商品分类</h1> </div> <div id="menu"> <ul> </ul> </div> <div id="content"> </div> # </div> ```
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时想着能进去就不错了,管他哪个岗呢,就同意了面试...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
兼职程序员一般可以从什么平台接私活?
这个问题我进行了系统性的总结,以下将进行言简意赅的说明和渠道提供,希望对各位小猿/小媛们有帮助~ 根据我们的经验,程序员兼职主要分为三种:兼职职位众包、项目整包和自由职业者驻场。 所谓的兼职职位众包,指的是需求方这边有自有工程师配合,只需要某个职位的工程师开发某个模块的项目。比如开发一个 app,后端接口有人开发,但是缺少 iOS 前端开发工程师,那么他们就会发布一个职位招聘前端,来配合公司一...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
写了很久,这是一份最适合/贴切普通大众/科班/非科班的『学习路线』
说实话,对于学习路线这种文章我一般是不写的,大家看我的文章也知道,我是很少写建议别人怎么样怎么样的文章,更多的是,写自己的真实经历,然后供大家去参考,这样子,我内心也比较踏实,也不怕误导他人。 但是,最近好多人问我学习路线,而且很多大一大二的,说自己很迷茫,看到我那篇 普普通通,我的三年大学 之后很受激励,觉得自己也能行,(是的,别太浪,你一定能行)希望我能给他个学习路线,说
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
碎片化的时代,如何学习
今天周末,和大家聊聊学习这件事情。 在如今这个社会,我们的时间被各类 APP 撕的粉碎。 刷知乎、刷微博、刷朋友圈; 看论坛、看博客、看公号; 等等形形色色的信息和知识获取方式一个都不错过。 貌似学了很多,但是却感觉没什么用。 要解决上面这些问题,首先要分清楚一点,什么是信息,什么是知识。 那什么是信息呢? 你一切听到的、看到的,都是信息,比如微博上的明星出轨、微信中的表情大战、抖音上的...
so easy! 10行代码写个"狗屁不通"文章生成器
前几天,GitHub 有个开源项目特别火,只要输入标题就可以生成一篇长长的文章。 背后实现代码一定很复杂吧,里面一定有很多高深莫测的机器学习等复杂算法 不过,当我看了源代码之后 这程序不到50行 尽管我有多年的Python经验,但我竟然一时也没有看懂 当然啦,原作者也说了,这个代码也是在无聊中诞生的,平时撸码是不写中文变量名的, 中文...
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的回答,对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalking,作者吴晟、刘浩杨 等等 仓库地址: apache/skywalking 更...
相关热词 c# plc s1200 c#里氏转换原则 c# 主界面 c# do loop c#存为组套 模板 c# 停掉协程 c# rgb 读取图片 c# 图片颜色调整 最快 c#多张图片上传 c#密封类与密封方法
立即提问