devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js_$('.nav-tabs').css('left')

作者：IT小白 | 2024-02-08 14:13:49

赞

踩

$('.nav-tabs').css('left')
  1. 根据url添加样式
  2. $(function () {
  3.     var url = window.location.pathname;
  4.     $('.rt-header .container .nav >li a').each(function () {
  5.         var hre = $(this).attr('href');
  6.         if (url === hre) {
  7.             $(this).css('border-top', '2px solid #0099e5').css('color', '#0099e5');
  8.             //$(this).siblings('.nav-tabs').css('background', '');
  9.         }
  10.     });
  11. });
  1. 当大于等于520 滑动固定
  2. $(function() {
  3. 	var nav = $(".fixed_pc");
  4. 	var win = $(window);
  5. 	var sc = $(document);
  6. 	win.scroll(function() {
  7. 		if (sc.scrollTop() >= 520) {
  8. 			nav.addClass("fixed_tab");
  9. 		} else {
  10. 			nav.removeClass("fixed_tab");
  11. 		}
  12. 	})
  13. })
  1. $(function(){$('.tab-js-key').click(function() {
  2.     var _this=$(this);
  3.     _this.addClass('active').siblings('li').removeClass('active');
  4.     });
  5. });
  1. window.onload=function(){
  2.   var obt=document.getElementById("footer-link1");
  3.   var odiv=document.getElementById("link-main");
  4.   obt.onclick=function(){
  5.     if(odiv.style.display=="none"){
  6.       odiv.style.display="block";
  7.       obt.value="隐藏模块";
  8.     }
  9.     else{
  10.       odiv.style.display="none";
  11.       obt.value="显示模块";
  12.     }
  13.   }
  14. }
  1. //弹框
  2. $(function(){
  3.         if($.cookie("isClose") != 'yes'){
  4.             var winWid = $(window).width()/2 - $('.alert_windows').width()/2;
  5.             var winHig = $(window).height()/2 - $('.alert_windows').height()/2;
  6.             $(".alert_windows").css({"left":winWid,"top":-winHig*2});   //自上而下
  7.             $(".alert_windows").show();
  8.             $(".alert_windows").animate({"left":winWid,"top":winHig},1000);
  9.             $(".alert_windows input").click(function(){
  10.                 $(this).parent().fadeOut(500);
  11.                 $.cookie("isClose",'yes',{ expires:1/8640});    //测试十秒
  12.                 //$.cookie("isClose",'yes',{ expires:1});       一天
  13.             });
  14.         }
  15.     });
  16. $(document).ready(function(){
  17.   $("#sub").click(function(){
  18.     $("form").hide();
  19.   })
  20.  
  21. });
  1. window.onload = function () {
  2.     $("#crm_phone").focus();
  3. };
  4. /************************  失焦判断  **********************************/
  5. $("input").blur(function () {
  6.     $(".spa").css("color", "#BD362F");
  7.     if ($(this).is("#crm_phone")) {            //手机号判断
  8.         var ph = /^1[3|5|7|8|][0-9]{9}$/;
  9.         if ($("#crm_phone").val() !== "") {
  10.             if (!(ph.test($("#crm_phone").val()))) {
  11.                 $(".spa2").text("请输入正确手机号");
  12.                 $(this).css("border", "1px solid #BD362F");
  13.                 return false;
  14.             } else if (ph) {
  15.                 $(".spa2").text("");
  16.                 return true;
  17.             };
  18.         } else {
  19.             $(".spa2").text("");
  20.         }
  21.     }
  22. });
  23. /********************** 聚焦提示 ************************/
  24. $("input").focus(function () {
  25.     if ($(this).is("#crm_phone")) {
  26.         $(".spa2").text("请输入您的手机号").css("color", "#aaa");
  27.         $(this).css("border", "1px solid #aaa");
  28.     };
  29. });
  30. /*********************** 提交验证 ***************************/
  31. $("#sub").click(function () {
  32.     var ph = /^1[3|4|5|6|7|8|9|][0-9]{9}$/;    //手机号正则
  33.     if (ph.test($("#crm_phone").val())) {
  34.         return true;
  35.     } else {
  36.         if ($("#crm_phone").val() === "") {
  37.             $(".spa2").text('请填写您的手机号');
  38.         }
  39.         return false;
  40.     }
  41. });
  1. // 题库首页移动版响应式
  2. $(function(){
  3.     var w_width = $(window).width();
  4.     if(w_width < 1140){
  5.         $(".row-tiku .middle-content .content-left .click").css("overflow",'scroll');
  6.     }
  7. });
  1. $(".one-tab-f li").hover(function(){var index=$(this).index();$(this).parent().next("div").children(".one-tab-s1").eq(index).removeClass("one-hide-box").siblings("div").addClass("one-hide-box")});$(".one-tab-f li").hover(function(){$(this).find("a").addClass("one-tab-f-changes").parent().siblings("li").find("a").removeClass("one-tab-f-changes")});$("#topNav .swiper-wrapper .swiper-slide").click(function(){var index=$(this).index();$(this).parent().parent().siblings("#one-tab-s").children(".one-tab-s1").eq(index).removeClass("one-hide-box").siblings("div").addClass("one-hide-box")});var marg=0;var pag=$(".one-tab-f li").length*184;var allwidth=$(".boxShadow").width();$(".box-switchover-major-right").click(function(){if(pag>allwidth){marg+=184;allwidth+=184;$(".one-tab-f").css("margin-left",-(marg)+"px")}});$(".box-switchover-major-left").click(function(){if(marg!=0){marg-=184;allwidth-=184;$(".one-tab-f").css("margin-left",-(marg)+"px")}});$('.tab-content').children("ul").eq(0).removeClass("hide");$(".tab-title span").hover(function(){var index=$(this).index();$(this).parent().parent().next("div").children("ul").eq(index).removeClass("hide").siblings("ul").addClass("hide")});$('.tab-title span').hover(function(){$(this).addClass('selected').siblings('span').removeClass('selected')});
  2. //课程切换
  3. $('.qiehuan').children("div").eq(0).removeClass("hide");
  4. $(".navqh li").click(function () {
  5.     var index=$(this).index();
  6.     $(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");
  7. });
  8. $('.navqh li').click(function(){
  9.     $(this).addClass('active').siblings('li').removeClass('active');
  10. });
  11.  
  12. //课程切换
  13. $('.qiehuanrm').children("div").eq(0).removeClass("hide");
  14. $(".navqhrm li").hover(function () {
  15.     var index=$(this).index();
  16.     $(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");
  17. });
  18. $('.navqhrm li').hover(function(){
  19.     $(this).addClass('active').siblings('li').removeClass('active');
  20. });
  1. $(function (){  
  2.     //合成事件 hover()  
  3.     $("#rt-sidebar").hover(function (){  
  4.         $("#sp-ul").show();  
  5.     },function (){  
  6.         $("#sp-ul").hide();  
  7.     });  
  8.            
  9. }); 
  10. $('.kemu-qiehuan').children("div").eq(0).removeClass("hide");
  11. $(".navqh li").hover(function() { var index = $(this).index();$(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");});
  12. $('.navqh li').hover(function() {$(this).addClass('active').siblings('li').removeClass('active');});
  13. //滑动固定头部
  14. $(function() {
  15. 	var nav = $(".rt-nav");
  16. 	var win = $(window);
  17. 	var sc = $(document);
  18. 	win.scroll(function() {
  19. 		if (sc.scrollTop() >= 160) {
  20. 			nav.addClass("header-sp");
  21. 		} else {
  22. 			nav.removeClass("header-sp");
  23. 		}
  24. 	})
  25. })
  1. //回顶部按钮
  2. var obtn = document.getElementById('bat');
  3. var clientHeight = document.documentElement.clientHeight;
  4. var timer = null;
  5. var isTop = true;
  6. window.onscroll = function(){
  7. var osTop = document.documentElement.scrollTop || document.body.scrollTop;
  8.     if(osTop >= clientHeight){
  9.                 obtn.style.opacity = '1';
  10.     }else{         //否则隐藏
  11.                 obtn.style.opacity = '0';
  12.     }
  13.     if(!isTop){
  14.  
  15.         clearInterval(timer);
  16.     }
  17.     isTop = false;
  18. }
  19. $("#bat").click(function () {
  20.     timer = setInterval(function(){
  21.     var osTop = document.documentElement.scrollTop || document.body.scrollTop;
  22.     var speed = Math.floor(-osTop / 6);
  23.     document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
  24.     isTop =true;
  25.     	if(osTop == 0){
  26.     	clearInterval(timer);
  27.     	}
  28.     },30);
  29. })
  30.  $(document).ready(function(){
  31.         $('#course-more-1').hover(function() {
  32.             $("#course-more-1").css('display', 'block');
  33.         }, function() {
  34.            $("#course-more-4").css('display', 'none');
  35.         });
  36.             $("#course-more-4").hover(function() {
  37.                 $(this).css('display', 'block');;
  38.             }, function() {
  39.                 $(this).css('display', 'none');
  40.             });
  41.  })
  42.  //头部显示时间设置
  43.  setTimeout(function(){$(".navbar-top-black-banner").fadeOut(1500);},10000);
  1. white-space: nowrap; overflow: hidden;不进行换行和隐藏
  2. text-overflow: ellipsis;后面几个字显示...
  3.  
  4. background-size:cover; 图片自适应
  5. 鼠标图片放大
  6. <div class="col-md-3 col-xs-3 ad-item">
  7.  
  8.  <a href="{{ ad[0].href|default('') }}" target="{{ ad[0].target|default('') }}" class="ad-template">
  9.     
  10. <img class="img-responsive" src="{{ asset(ad[0].src|default('')) }}">
  11.   
  12. </a>
  13.  
  14. </div>  
  15. .rt-ad .row .ad-template{display: block;overflow: hidden;}
  16. .rt-ad img:hover{transform:scale(1.3);-webkit-transform:scale(1.4)}
  17. .row .img-responsive {cursor: pointer;transition: all 0.6s;}
  18.  
  19. bootstrap
  20. 添加 data-ride="carousel"  可以实现自动播放
  21.  
  22. 当原图片加载失败时，如何让图片加载上我们默认给的图片http://blog.csdn.net/Noneyes/article/details/70255205
  23. 1、在img标签中加上 onerror="this.src='error.png ' ";
  24. <img src="Images/1.png " onerror="this.src='error.png ' " >
  25.  
  26. jquery:滚动到指定位置
  27. scrollTo
  28. zhuxinjiaoyu1104 QQ
  29.  
  30. #085af7;好的颜色http://tool.oschina.net/commons?type=3;  #00dcff
  31.  
  32.  
  33. col-md-2 col-sm-3 col-xs-4
  34.  
  35. 固定头部js
  36. $(function(){//滑动固定头部
  37. var nav=$(".rt-header"); //得到导航对象
  38. var win=$(window); //得到窗口对象
  39. var sc=$(document);//得到document文档对象。
  40. win.scroll(function(){
  41.   if(sc.scrollTop()>=130){
  42.     nav.addClass("fixednav"); 
  43.   }else{
  44.    nav.removeClass("fixednav");
  45.   }
  46. })  
  47. })
  48. 火狐浏览器下点击a标签时出现虚线 加上就不会出现虚线了
  49. a:focus {
  50. outline: none;
  51. }
  52.  
  53.  
  54. 如果栏目比较多,移动端使用互动显示
  55.     display: -webkit-box;
  56.     overflow-x: scroll;
  57.     overflow-y: hidden;
  58.     -webkit-overflow-scrolling: touch;
  59. 然后在子下级设置width的宽度即可
  60.  
  61. *************************************
  62. 鼠标经过显示隐藏事件
  63. 1) $(function (){  
  64.     //合成事件 hover()  
  65.     $("#sidebar").hover(function (){  
  66.         $("#sidebar-nav").show();  
  67.     },function (){  
  68.         $("#sidebar-nav").hide();  
  69.     });  
  70.            
  71. });
  72. 下面的更全面,默认隐藏,如果想要点击把hover换成click就可以了
  73. 2) $(document).ready(function(){
  74. 	$("#sidebar-nav").css('display', 'none');
  75.         $('#sidebar').hover(function() {
  76.             $("#sidebar-nav").css('display', 'block');
  77.         }, function() {
  78.            $("#sidebar-nav").css('display', 'none');
  79.         });
  80.         $("#sidebar-nav").hover(function() {
  81.             $(this).css('display', 'block');
  82.         }, function() {
  83.             $(this).css('display', 'none');
  84.         });
  85.  });
  86. ************************
  87. style来控制样式；
  88.  
  89. cursor:pointer代表鼠标滑过变成小手图标
  90.  
  91. text-decoration:none代表不显示下划线
  92. ****************
  93. js
  94.  
  95. $(function() {}) 是$(document).ready(function()的简写
  96.  
  97. ************************
  98. jq隐藏显示
  99. $(document).ready(function(){
  100. $("p").css('display', 'none');
  101.   $("button").hover(function(){
  102.     $("p").toggle();
  103.   });
  104. });
  105. <button>隐藏/显示</button>
  106. <p>这是一个文本段落。</p>
  107. <p>这是另外一个文本段落。</p>
  108. *********************************
  109. 根据url修改导航栏样式的js
  110. var url = window.location.pathname;
  111. $('.nav li a').each(function(){
  112.     var hre = $(this).attr('href');
  113.         if(url == hre){
  114. //            $(this).css('color','#3477ff');
  115.             $(this).css('cssText','color:red !important');
  116.             $(this).siblings('.nav-tabs').css('color','');
  117.  
  118.         }
  119. })
  120. *********************************
  121. 切换进行添加active兄弟移除
  122. $(function(){$('.qw').click(function() {
  123.     var _this=$(this);
  124.     _this.addClass('active').siblings('li').removeClass('active');
  125.     });
  126. });
  127. **************************************
  128. /**
  129. * JavaScript脚本实现回到页面顶部
  130. * @param acceleration 速度
  131. * @param stime 时间间隔 (毫秒)
  132. **/
  133. function gotoTop(acceleration, stime) {
  134. 	acceleration = acceleration || 0.1;
  135. 	stime = stime || 10;
  136. 	var x1 = 0;
  137. 	var y1 = 0;
  138. 	var x2 = 0;
  139. 	var y2 = 0;
  140. 	var x3 = 0;
  141. 	var y3 = 0;
  142. 	if (document.documentElement) {
  143. 		x1 = document.documentElement.scrollLeft || 0;
  144. 		y1 = document.documentElement.scrollTop || 0;
  145. 	}
  146. 	if (document.body) {
  147. 		x2 = document.body.scrollLeft || 0;
  148. 		y2 = document.body.scrollTop || 0;
  149. 	}
  150. 	var x3 = window.scrollX || 0;
  151. 	var y3 = window.scrollY || 0;
  152. 	// 滚动条到页面顶部的水平距离
  153. 	var x = Math.max(x1, Math.max(x2, x3));
  154. 	// 滚动条到页面顶部的垂直距离
  155. 	var y = Math.max(y1, Math.max(y2, y3));
  156. 	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
  157. 	var speeding = 1 + acceleration;
  158. 	window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
  159. 	// 如果距离不为零, 继续调用函数
  160. 	if (x > 0 || y > 0) {
  161. 		var run = "gotoTop(" + acceleration + ", " + stime + ")";
  162. 		window.setTimeout(run, stime);
  163. 	}
  164. }
  165.  
  166. <a href="#" onclick="gotoTop();return false;" class="totop"></a>
  167. 小火箭css
  168. .totop {
  169.     position: fixed;
  170.     right: 15px;
  171.     bottom: 25px;
  172.     display: block;
  173.     width: 26px;
  174.     height: 62px;
  175.     background: url(/static-dist/app/img/rocket.png) no-repeat 0 0;
  176.     -webkit-transition: all 0.2s ease-in-out;
  177. }
  178. .totop:hover{background:url(/static-dist/app/img/rocket.png) no-repeat 0 -62px;}
  179. ***********************************************
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/69382
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号