[英]How to override inline css style property which added by jquery
I am using Kendo UI tabs so once tabs reach the last li list the right navigation arrow get hidden or added the display none inline CSS with jquery so I want to override the display none to display block.important and add opacity 0.4 when div have display none property.我正在使用 Kendo UI 选项卡,因此一旦选项卡到达最后一个 li 列表,右导航箭头就会被隐藏或添加 display none inline CSS 和 jquery 所以我想覆盖显示 none 以显示 block.important 并在 div 显示时添加不透明度 0.4没有财产。
https://dojo.telerik.com/@vishal14/UcaPEYoh https://dojo.telerik.com/@vishal14/UcaPEYoh
I try with if statement but its not working我尝试使用 if 语句,但它不起作用
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip();
if($('.k-button').is(':visible')){
$(this).css("opacity","0.2");
}else{
$(this).css("opacity","1");
}
});
</script>
Your code if($('.k-button').is(':visible'))
is not working because the left and right buttons are added dynamically.您的代码if($('.k-button').is(':visible'))
不起作用,因为左右按钮是动态添加的。
For the right button, try this code:对于右键,请尝试以下代码:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip();
setInterval(function () {
var el = $('.k-tabstrip-next');
if (el.css('display') == 'none') {
el.css("opacity", "0.2").css('display', '');
el.attr('data-el', 'stop');
}
else if (el.attr('data-el') != 'stop')
el.css("opacity", "1");
}, 200);
$(document).on('click', '.k-tabstrip-prev', function () {
$('.k-tabstrip-next').attr('data-el', '');
});
});
If you want both buttons to be visible, you can try this:如果你想让两个按钮都可见,你可以试试这个:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip();
setInterval(function () {
var ne = $('.k-tabstrip-next');
var pr = $('.k-tabstrip-prev');
if (ne.css('display') == 'none') {
ne.css("opacity", "0.2").css('display', '');
ne.attr('data-el', 'stop');
}
else if (ne.attr('data-el') != 'stop')
ne.css("opacity", "1");
if (pr.css('display') == 'none') {
pr.css("opacity", "0.2").css('display', '');
pr.attr('data-el', 'stop');
}
else if (pr.attr('data-el') != 'stop')
pr.css("opacity", "1");
}, 200);
$(document).on('click', '.k-tabstrip-prev', function () {
$('.k-tabstrip-next').attr('data-el', '');
});
$(document).on('click', '.k-tabstrip-next', function () {
$('.k-tabstrip-prev').attr('data-el', '');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.