一般国外的网站很注重细节,他们会把菜单或者button做成图片,并且还有hover和selected状态。
如果仅仅是单独的button,可以addClass("xx")或者removeClass("xx"),xx是固定值,
但是对于一组菜单或者button,这个时候需要动态地给每个标签加一个对应状态的class,来控制显示样式。
例如下面这样:
<ul>
<li class="logo1">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
selected的时候:
<ul>
<li class="logo1 logo1-selected">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
hover的时候:
<ul>
<li class="logo1 logo1-selected logo1-hover">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
<script type="text/javascript">
$(function(){
$("ul li").each(function(){
var currentClass = $(this).attr("class");
$(this).hover(
function(){
removeHover();
$(this).addClass(currentClass+"-hover");
},
function(){
removeHover();
}
)
$(this).click(function(){
removeHoverSelected()
$(this).addClass(currentClass+"-selected");
})
})
})
function removeHover(){
$("ul li").each(function(){
var classNames = $(this).attr("class").split(" ");
for(var i = 0;i<classNames.length;i++){
if(classNames[i].indexOf("hover") > -1){
$("ul li").removeClass(classNames[i]);
}
}
})
}
function removeHoverSelected(){
$("ul li").each(function(){
var classNames = $(this).attr("class").split(" ");
for(var i = 0;i<classNames.length;i++){
if(classNames[i].indexOf("selected") > -1 || classNames[i].indexOf("hover") > -1){
$("ul li").removeClass(classNames[i]);
}
}
})
}
</script>
这种方法对N个元素的菜单组或者button组都适用。
分享到:
相关推荐
数据结构图的遍历class LinkedDigraph; class LinkedGraph; template <class T> class LinkedWDigraph; template <class T> class LinkedWGraph; template<class T> class LinkedBase: virtual public Network { ...
从网上查到的方法是 用get_object_vars 把类类型转换成数组 然后在用 foreach 遍历即可
本资源提供对于ViewGroup下所以子view的遍历,以及调用Views都过tag或者Widget的类查找返回一个List 使用方法可见示例: 子View遍历 ...List<ImageView> imageViews = Views.find(root, ImageView.class)
vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 ... <div class=box> <li v-for=value>{{value}}</li><br> (value,index)>{{value}}--{{index}} [removed]</s
该mk文件,会遍历class下所有目录,不用手动一个一个加入
class BSTTree { public: //构造函数 BSTTree(); //析构函数 ~BSTTree(); //打印操作 void Print(const unsigned int &module;); //打印节点信息 void PrintNode(Node *p); //前序遍历 void PreorderPrint...
WPF中控件的循环遍历,批量赋值。代码包含遍历函数,以及我使用的一个CLASS。
二叉树 遍历 插入节点 demo class
今天小编就为大家分享一篇Python实现使用dir获取类的方法列表,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
将Dir.class放在任意需要遍历的文件目录,直接命令窗口运行java Dir生成Dir.txt文件
剑指Offer(Python多种思路实现):二叉搜索树的第K大节点...解题思路一:中序遍历 class Solution: # 返回对应节点TreeNode def KthNode(self, pRoot, k): # write code here if not pRoot or k<=0: return None
public class FreemarkerController { //测试1 @RequestMapping(/test1) public String test1(Model model){ //向数据模型放数据 model.addAttribute(name,三年二班); Student stu1 = new Student(); stu1....
class BinaryTreeNode{ public $m_value; public $m_left; public $m_right; } function ConstructCore($preorder,$inorder){ if(count($preorder)!=count($inorder) || count($preorder)==0
class BiTreeNode { private: BiTreeNode *leftChild; //左子树指针 BiTreeNode *rightChild; //右子树指针 public: char data; //数据域 //构造函数和析构函数 BiTreeNode():leftChild(NULL), rightChild...
第02个小程序:遍历画笔(FlipThroughTheBrushes.cs) using System; using System.Reflection; using System.Windows; using System.Windows.Input; using System.Windows.Media; namespace Chapter02 { ...
利用runtime的class_copyPropertyList方法获取类的属性名字,以前老的代码不能用,新版的注意事项已经加到注释连了,yyModel框架也是利用这种方法遍历类属性
template <class T> void InThrBiTree::InOrder(ThrNode<T> *root) { if (root==NULL) return; //如果线索链表为空,则空操作返回 p=root; while (p->ltag==0) //查找中序遍历序列的第一个结点p并访问 p=p->...
<td class="category" align="center"> 序号 <td class="category" align="center"> 业务类型 <td class="category" align="center"> 业务编码 <td class="category" align="center"> 满板数量 ...
本文实例讲述了php实现的二叉树遍历算法。分享给大家供大家参考,具体如下: ...并且在遍历左右子树时,仍需先遍历根节点,然后访问左子树,最后遍历右子树 public static function preOrder($root){ $s