我制作了一个按钮组，当用户选择上一个或下一个按钮的每个按钮背景移动/滑动到选定的一个时，我用纯 css 制作了这个效果并且只使用了 jquery 添加或删除 active 类。现在的问题是当你点击 All 按钮，然后点击 New 它工作正常，但是如果你点击 Used 幻灯片就不能正常工作位置。
为了这个效果我使用了transition和::before，需要用纯css或者最小的jquery来解决这个问题，不是很多javascript 或 jquery 代码。
移动这个背景的逻辑是:
.RadioButton .btn:first-child::before {
right: 0;
transition: .3s all ease;
}
.RadioButton .btn:nth-child(2)::before {
transition: .3s all ease;
}
.RadioButton .btn:last-child::before {
left: 0;
transition: .3s all ease;
}
关于 .RadioButton .btn:nth-child(2)::before 的问题我不能使用 right:0 或 left:0 因为如果我使用每一个，幻灯片效果在正确的位置不起作用，有什么解决办法吗？
到目前为止我尝试了什么:
$('.RadioButton').each(function(){
$(this).find('.btn').each(function(){
$(this).click(function(){
$(this).parent().find('.btn').removeClass('btn-active');
$(this).addClass('btn-active');
});
});
});body {
direction: rtl;
}
.RadioButton .btn {
width: 33%;
float: left;
margin: 0;
box-sizing: border-box;
position: relative;
font-size: 11px;
min-height: 30px!important;
line-height: 30px;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.btn-default {
border: 1px solid gray;
color: gray;
}
.btn-group>.btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group>.btn:nth-child(2) {
border-radius: 0;
}
.btn-group>.btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.RadioButton .btn::before {
content: "";
height: 100%;
width: 0%;
background: gray;
position: absolute;
top: 0;
transition: .3s all ease;
z-index: -1;
}
.btn-active::before {
width: 100%!important;
}
.RadioButton .btn:nth-child(2)::before {
right: 0;
transition: .3s all ease;
}
.RadioButton .btn:last-child::before {
left: 0;
transition: .3s all ease;
}
.btn-active:first-child::before {
left: 0;
transition: .3s all ease;
}
.btn-active:last-child::before {
left: 0;
transition: .3s all ease;
}
.btn.btn-default.btn-active {
color: white;
}
.btn-group {
clear: both;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RadioButton btn-group" id="searchType">
<a class="btn btn-default" data-val="0">Used</a>
<a class="btn btn-default" data-val="1">New</a>
<a class="btn btn-default btn-active" data-val="2">All</a>
</div>
最佳答案
在最后一个按钮上仅在伪之后设置一个。 现在，使用同级选择器和事件类将其适本地向左移动。 (查看 CSS 中的最后两个样式)
$('.RadioButton').each(function(){
$(this).find('.btn').each(function(){
$(this).click(function(){
$(this).parent().find('.btn').removeClass('btn-active');
$(this).addClass('btn-active');
});
});
});body {
direction: rtl;
}
.RadioButton .btn {
width: 33%;
float: left;
margin: 0;
box-sizing: border-box;
position: relative;
font-size: 11px;
min-height: 30px!important;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.btn-default {
border: 1px solid gray;
color: gray;
}
.btn-group>.btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group>.btn:nth-child(2) {
border-radius: 0;
}
.btn-group>.btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn.btn-default.btn-active {
color: white;
}
.btn-group {
clear: both;
margin-top: 10px;
}
.RadioButton .btn:nth-child(3)::before {
content: "";
height: 100%;
width: 100%;
background: gray;
position: absolute;
top: 0;
transition: .3s all ease;
z-index: -1;
left: 0px;
}
.btn-active:first-child ~ .btn::before {
transform: translateX(calc(-4px - 200%));
}
.btn-active:nth-child(2) ~ .btn::before {
transform: translateX(calc(-2px - 100%));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RadioButton btn-group" id="searchType">
<a class="btn btn-default" data-val="0">Used</a>
<a class="btn btn-default" data-val="1">New</a>
<a class="btn btn-default btn-active" data-val="2">All</a>
</div>
关于javascript - 制作背景幻灯片动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47675041/
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim
我有一个关于多维数组的初学者ruby问题。我想按年份和月份对条目进行排序。所以我想创建一个包含年->月->月条目的多维数组所以数组应该是这样的:2009->08->Entry1->Entry209->Entry32007->10->Entry5现在我有:@years=[]@entries.eachdo|entry|timeobj=Time.parse(entry.created_at.to_s)year=timeobj.strftime("%Y").to_imonth=timeobj.strftime("%m").to_itmparr=[]tmparrentry}@years.pu
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
问题总结我想尝试使用Ruby来完成我在Python中所做的事情。在Python中它有r"""syntaxtosupportrawstrings，这很好，因为它允许将原始字符串与代码内联，并以更自然的方式连接它们，而无需特殊缩进。在Ruby中，当使用原始字符串时，必须使用其次是EOT在单独的行中，这会破坏代码布局。你可能会问，为什么不使用Ruby的%q{}？嗯，因为%q{}与Python的r"""相比有局限性因为它不会转义多个\\\并且只处理单个\.我正在动态生成Latex代码并写入一个文件，该文件稍后用pdflatex编译。Latex代码包含类似\\\的内容在许多地方。如果我使用Rub