jqury控制<ul>下的<li>选中效果

这里是引用art-template模板的版本(具体不详说啦)

css部分

.wk_res_ul li.active a ,.wk_res_ul li:hover a{
    color: #f90 !important;
}

----------------------------------------

html部分

<ul class="wk_res_ul fl_ul" style="border-bottom:none" id="subject_div"></ul>
      <script type="text/html" id="subject_data">    
        <label class="ul_name ">学科:</label>
        <% for ( var i = 0; i<subject_list.length; i++ ){%>
                <li onclick="changeShow(this.id)" id="<%=subject_list[i].subject_id%>">

          <a><%=subject_list[i].subject_name%></a>

       </li>
        <% } %>
      </script>

----------------------------------------

js 部分

function changeShow(id){
    $("#" + id).addClass("active");
    $("#" + id).parent("ul").children("li").not("#" + id).removeClass("active");
}

----------------------------------------

此方法适合页面有多个<ul>,为了达到复用效果,写法有点变态了,推敲了很久,暂时先这么写,有好的马上更新

时间: 2024-10-23 21:01:45

jqury控制<ul>下的<li>选中效果的相关文章

将一个ul下的li转移到另外一个ul里面 【appendTo】

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>将一个ul下的li转移到另外一个ul里面</title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type=&

jquery选择div下的ul下的li下的a

使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children("ul:first").children("li:first").find("a");//div下的第一个ul下的第一个li下的a标签 //可以用下标 $("div#div的id").children("u

遍历ul下的li,点击弹出li的索引

首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的

JS-事件之鼠标、键盘都能控制的下拉选框效果

<script type="text/javascript"> window.onload=function(e){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'),//as是一个集合 index=-1

问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?

因为容器的子元素设置浮动后, 内容移出了文档流!  解决办法: 1.给个overflow:hidden;作为闭合浮动元素2.设定UL 一个固定的高度 下面是一些与之相关的解决办法,参考文章<那些年一起清除过的浮动><style type="text/css"> .warp{ width:80%; border:1px solid #000000; } .main{ width:70%; height:300px; background-color:#999933

jquery,javascript -设置某一ul下的li下的 a的属性

//javascriptvar ul = document.getElementById('ul); var as = ul.getElementsByTagName('a'); for(var i = 0; i <as.length; i++) { as.item(i).onmouseover = function() { var iframe_con = document.getElementById(pos_content); var src = './content/' + this.i

ul下的li浮动,如何是ul有li的高度

此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title> <style> ul{ display: inline-block; border:1px solid #000; } ul li{ border:1px solid #f00; float:left; } </style> </head> <body>

解决ul下的li换行问题,(父元素div加overflow:scroll没作用的问题)

#left, #right { width: 50%; box-sizing: border-box; min-height: 100%; float: left; overflow: scroll;//必须写} #left ul{ float: left;//必须写 display:flex;//必须写 }#left ul > li { display:inline-block;//必须写 list-style: none; box-sizing: border-box; float: lef

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都能使用多种方法实现.但现在这个问题该怎么去解决呢. 对了这个题目,似乎不是那么好解决,毕竟像这类问题我们都是使用js或者模版辅助实现的. 这个题目难点在哪儿? 对动态添加的数据只用css实现这个效果,那就意味着除了动态添加数据外,不可能改变现有的文档结构.什么意思呢?比如对于这种实现,我们可以使用u