我正在尝试使用一个纯css滑块(
http://jsfiddle.net/trN4p/1/)在同一文档/页面上的另一个纯css滑块内操作：目标导航,每个滑块具有独立控制.
以下是问题的示例：http://jsfiddle.net/J6htH/4/
我希望内部(CHILD)滑块独立于外部(PARENT)滑块并与其一起工作(w / out冲突).
我想知道是否有办法将两个滑块分开,以便它们的列表项(和哈希标签)相对于滑块而不是整个页面/ dom运行？是否有一些jQuery / Ajax魔术或JS模板(骨干/下划线)技巧来做到这一点？
解决方法
我讨厌这样说(因为我理解在纯CSS中制作非常棒的东西感觉真棒),但你应该使用JavaScript.
请耐心等待我,如果您认为我不合理,请发表评论：
您只能将单个元素匹配为：target,因为您只能有一个#标签,因此最多可以一次将一个滑块设置为特定项目(另一个将返回默认值).无论你喜欢与否,这都是约束.
另一方面,HTML CSS JS是Model-View-Controller模式/模型/概念的一个很好的例子.
> HTML是模型,因为它包含所有数据
> CSS是View,因为它包含所有样式
> JS是Controller,因为它定义了用户,数据和样式如何相互交互.
您正在尝试制作涉及用户交互的滑块.触发事件(如点击)应该由Controller处理,而不是View.
TL;博士：
您不能在纯CSS中执行您所描述的内容.
