- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
当我点击 bye 项时,div class=page_bye 应该更改为 div class=page_bye1 并且 div class=page_home1 的类应该更改为 page_home page_home1 和 page_bye 应更改为 page_bye1。但是 div 的样式没有切换。plz 帮助
<body>
<aside>
<div class=sidebar>
<ul class=nav>
<li class="home1">HOME</li>
<li class="bye">BYE</li>
</ul>
</div>
</aside>
<article>
<div class="page_home1">
<div class="myhome">
<h1>Home</h1>
<p> this is the index page </p>
</div>
</div>
<div class="page_bye">
<div class="mybye">
<h1>Goodbye</h1>
<p> this is bye page </p>
</div>
</div>
</article>
<script>
var regex = /1$/
$("ul.nav li").on('click', function(e) {
var $this = $(this), clazz = $this.attr("class");
var pageclazz="page_"+$this.attr('class');
e.preventDefault();
if(!regex.test(clazz)){
$this.removeClass(clazz).addClass(clazz + 1);
var pagedisplay = "page_"+$this.attr("class");
$("article div").removeClass(pageclazz).addClass(pagedisplay);
$this.siblings('[class$="1"]').attr('class', function(idx, clazz){
return clazz.substring(0, clazz.length - 1)
});
$("article div").siblings('[class$="1"]').attr('class', function(idx, pageclazz){
return pageclazz.substring(0, pageclazz.length - 1)
});
}
});
</script>
</body>
我的CSS是
body {
width:1020px;
margin:0 auto;
position:absolute;
}
aside{
float:left;
display:block;
width:20%;
}
article {
float:right;
display:block;
margin-top:0;
width:75%;
}
.page_home{
visibility:hidden;
}
.page_bye{
visibility:hidden;
}
.page_home1{
visibility:visible;
}
.page_bye1{
visibility:visible;
}
.sidebar {
margin-left:10px;
}
.nav {
display:block;
margin-top:60px;
}
ul {
list-style-type:none;
color:#000;
}
li.home{
background: #666 no-repeat;
width:150px;
height:65px;
color:#000;
}
li.bye{
background:#666 no-repeat;
width:150px;
height:65px;
color:#000;
}
li.home:hover {
background:#06F no-repeat;
width:150px;
height:65px;
color:#000;
}
li.bye:hover {
background:#06F no-repeat;
width:150px;
height:65px;
color:#000;;
}
li.home1 {
background:#06F no-repeat;
width:150px;
height:65px;
color:#000;
}
li.bye1 {
background:#06F no-repeat;
width:150px;
height:65px;
color:#000;
}
最佳答案
您可以通过减少所使用的类的数量来实现相同的功能。
并用几行代码编写相同的功能。
我唯一添加的是使用 HTML-5 data-* 属性来存储与链接相关的类。
我只是维护一个类并切换它,而不是替换现有类。
此外,您的 CSS 中有太多不需要的重复样式。我冒昧地清理了一下。仍然可以进行改进以提高效率。
HTML
<aside>
<div class=sidebar>
<ul class=nav>
<li class="home active" data-class="page_home">HOME</li>
<li class="bye" data-class="page_bye">BYE</li>
</ul>
</div>
</aside>
<article>
<div class="page_home show">
<div class="myhome">
<h1>Home</h1>
<p>this is the index page</p>
</div>
</div>
<div class="page_bye">
<div class="mybye">
<h1>Goodbye</h1>
<p>this is bye page</p>
</div>
</div>
</article>
CSS
body {
width:1020px;
margin:0 auto;
position:absolute;
}
aside {
float:left;
display:block;
width:20%;
}
article {
float:right;
display:block;
margin-top:0;
width:75%;
}
.page_home, .page_bye {
visibility:hidden;
}
.show {
visibility: visible;
}
.sidebar {
margin-left:10px;
}
.nav {
display:block;
margin-top:60px;
}
ul {
list-style-type:none;
color:#000;
}
.nav > li {
background: #666 no-repeat;
width:150px;
height:65px;
color:#000;
}
.nav >li:hover {
background:#06F no-repeat;
}
.nav > li.active {
background:#06F no-repeat;
}
Javascript
$("ul.nav li").on('click', function (e) {
var $this = $(this),
// Class of the one to be shown
clazz = $this.data("class");
// Add the active class to the li
// and remove it for their siblings
$this.addClass('active').siblings().removeClass('active');
// Remove the show class for all divs in articles
$('article > div').removeClass('show');
// Show only the div related to the class
$('.' + clazz).addClass('show');
});
关于jquery - 类(class)没有被取代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18047435/
我只想知道它们之间的区别: .class .class{ font-size:14px; } 对比: .class > .class{ font-size:14px; } 是一样的东西吗? 最佳答案
PrimeFaces 文档的以下摘录使标题中描述的两个选择器之间似乎存在差异: .ui-widget, .ui-widget .ui-widget { font-size: 90% !imp
我正在尝试选择特定值。但我遇到了一个问题。 我有两个元素,一个有 X Y,另一个有 X Y Z。 当选择 X Y Z 时,我也收到 X Y 的值...有没有办法让它寻找 X AND Y AND Z 而
.class.class 和 .class .class 有什么区别? 最佳答案 .class .class 匹配类 .class 的任何元素,这些元素是类 .class< 的另一个元素的后代/. .
我正在研究 Classname.class 和 Classname.class.toString() 并发现了一些不寻常的东西。 .class 在同一个类上运行时似乎等同于 .class。尽管 .cl
我试图在Dart中扩展列表并在此列表中使用另一个类。 这是我的示例,其中注释出了问题: import "Radio.dart"; // extends ListBase { List ra
我有一个很大的“经理”类,我认为它做得太多了,但我不确定如何将它划分为更多逻辑单元。 一般来说类主要由以下方法组成: class FooBarManager{ GetFooEntities();
我在一个文件中定义了一个抽象父类(super class),在另一个文件中定义了一个子类。我需要父类(super class)文件和堆栈跟踪报告来找到一个包含它。 但是,当它到达“extends”行时
我在 A. Alexenderscu 的现代 C++ 设计中找到了一些模板示例 作者使用以下行的地方 template class CheckingPolicy // class SmartPt
看一下这段代码: public static class A { public void doA() { } } public static class B extends A {
我有两个具有 .body 类的 div,但是,一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
我一定是遗漏了 C++ 规范中的某些内容,因为我无法解释为什么以下代码可以成功编译: class MyClass { static void fun(); }; int main() { MyClas
我正在尝试在 python 中“模拟”命名空间。我使用内部和外部类层次结构来创建我的命名空间。例如,您希望将文件(如资源)的路径保存在一个位置。我试过这样的事情: src = #path to sou
在试验 online crystal compiler 时(这太棒了),我遇到了一个我似乎无法找到解释的错误: class Person class Current < self end
在查看我的一段代码时,我陷入了如下的一条语句。 TMyObjectClass = TMyObject 类; 我有点困惑,不知道这句话是什么意思。由于 TMyObjectClass 在该语句上方没有声明
我正在编写一个简单的应用程序,以学习一些基本的Dart编程,但无法弄清楚其结构和包含的内容-我得到了一个重复的类Point 首先,我有一个叫做MouseTrack的主类。它将初始化列表并产生循环。 #
在 org.springframework.core.SerializableTypeWrapper (版本 5.2.3),第 112 行有以下代码: if (GraalDetector.in
我希望将鼠标悬停在子导航中的列表项上,以激活页面上该类别中所有项的类(不仅仅是父元素或同级元素)。有任何想法吗?这是我的意思的一个例子: img.BLUE {border:1px solid #FF
我正在通过 ClassLoader 加载类: Class clazz = urlClassLoader.loadClass(name.substring(0, name.length() - 6).r
以下简化的类在从 get() 返回值时执行不同的操作,具体取决于该类是被赋予 double 值还是数组作为模板参数: #include "array" #include "type_traits" t
我是一名优秀的程序员,十分优秀!