$('.j-d-list').find($('li[data-m="2017-10"]'))
var current=$("#diss").find($("dd[class='current']"));
----------------------------------------------------------------------------------------
class="current"
var current=$("#workplaceSelect").find($("a[class='current']"));
alert(current); alert(current.attr("districtId"));
//选中一个,移除其它。始终就一个选中 <ul> <li class="current"> </li> <li> </li> </ul>
this.addClass('current').siblings().removeClass("current");
$('.j-d-list').find($('li[data-m="'+switchMonth+'"]')).removeClass('on').addClass('off').find('i').text('');
$("#workplaceSelect a").each(function(){$(this).attr("class","")});
--------------------------jquery-------以下调试ok代码--------------当前操作a标签加样式 选中状态 -----------------------------------------
html代码
<ul id="workplaceSelect">
<li >
<a href="#" districtId='1' onclick="goPage(this,1)" > 1<i>预约</i> </a>
</li>
<li >
<a href="#" districtId='2' onclick="goPage(this,2)" > 2<i>预约</i> </a>
</li>
<li >
<a href="#" districtId='3' onclick="goPage(this,3)" >
3<i>预约</i></li> </a>
</ul>
<javascript>
//获得点击选中的 属性 districtId 值
function goPage(data,type){
//alert($(data).attr("districtId"));
//设置所有workplaceSelect 下的 a标签 class为"" ,不选中状态
$("#workplaceSelect a").each(function(){$(this).attr("class","")});
//当前点击a标签加class="current"
$(data).addClass('current').siblings().removeClass("current");
// $(data).attr('class','current');//.siblings().removeClass("current");
//获得当前选中 workplaceSelect a标签current属性上的districtId 值
var current=$("#workplaceSelect").find($("a[class='current']"));
alert(current); alert(current.attr("districtId"));
var districtId =current.attr("districtId");
// alert(id);
// window.location.href='http://localhost:8080/positionInfoAndCompany/list?districtId='+districtId;
}
</javascript>
分享到:
相关推荐
`index.html`文件应该包含了这些元素,例如使用`<input>`标签创建搜索框,`<ul>`和`<li>`标签构建联系人列表,每个联系人可以是一个可点击的条目,点击后显示或隐藏编辑字段。 2. **CSS样式**:`css`文件负责定义...
在本文中,我们将深入探讨如何使用jQuery实现动态的标签页效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果等任务,使得网页交互变得更加生动有趣。"jquery实战标签页效果"这个小例子...
这段代码通过 jQuery 的 `$` 符号选择器选中了所有名称属性为 `areas` 的 A 标签,并为其绑定了一个点击事件处理器。 #### 2. 获取点击元素的内容 ```javascript var area = $(this).html(); ``` 这里通过 `$...
"最好的jQuery标签切换"是指利用jQuery实现的一种交互式内容切换功能,常见于导航菜单、幻灯片展示或者信息面板等场景。通过这种技术,用户可以轻松地在多个内容区块之间进行切换,提升用户体验。 jQuery 标签切换...
总的来说,“jquery标签筛选联动选中”是一个典型的前端开发实践,它结合了HTML、CSS和JavaScript(尤其是jQuery库)的技术,展示了如何通过编程实现动态的用户界面交互。这样的功能增强了网站的交互性和用户体验,...
在本篇关于“JQuery实战:标签页效果”的讲解中,我们将深入探讨如何利用jQuery库创建功能丰富的标签页效果,这种效果在现代网页设计中非常常见,能够有效地组织和展示大量信息,提升用户体验。标签页通常由一组可...
在这个案例中,可能需要找到列表项(`<li>`)并对其应用选中效果。 4. **数据状态管理**:为了保持选中状态,可能需要使用`.data()`方法存储每个列表项的状态。这样即使页面重新加载,也能恢复之前的选择。 5. **...
总的来说,通过jQuery实现Tab标签是一项基础但实用的任务,它结合了HTML、CSS和JavaScript的知识,展示了前端开发中的常见工作流程。通过这个过程,开发者不仅能学会如何用jQuery实现交互功能,还能更好地理解和运用...
总结起来,实现JQuery的标签页效果涉及HTML布局、CSS样式和JQuery脚本的编写。理解并熟练掌握JQuery的选择器、事件和方法是创建这种效果的关键。在实际项目中,你可以根据需求进行扩展,比如添加动画效果,支持自动...
这通常通过`.remove()`方法实现,该方法会从DOM树中删除选中的元素,从而从页面上删除了该标签。 代码可能还包含一些额外的优化,比如输入验证,确保用户输入的是有效的标签,以及样式化,使界面更加美观和用户友好...
在 jQuery 标签页中,我们可以使用基本的 HTML 结构来定义各个标签和对应的面板,然后通过 jQuery 代码来实现动态切换和管理。通常,一个简单的标签页结构可能包含以下部分: 1. **HTML 结构**: ```html <li...
每个Tab标签对应一个幻灯片,通常使用`<ul>`和`<li>`来构建Tab导航,`<div>`用于包裹幻灯片内容。 2. CSS样式:通过CSS设置Tab的样式,包括选中状态、鼠标悬停效果等,确保视觉上的吸引力。 3. jQuery事件绑定:...
本教程将深入探讨如何使用jQuery来创建一个具有选中效果的input下拉菜单,这是一种常见的交互设计,能提升用户体验。 首先,我们要明白jQuery是如何工作的。jQuery通过选择器(Selector)来选取DOM元素,然后对这些...
在本实例中,我们将深入探讨如何利用jQuery实现一个功能丰富的“标签切换”功能,这在网页设计中非常常见,用于展示多个内容块而只显示一个块于用户面前。这种交互方式能够优化用户体验,使用户更容易浏览和理解页面...
通常,菜单会使用`<ul>`和`<li>`元素来构建,每个标签是一个`<li>`项。使用jQuery选择器,我们可以方便地选取这些元素,并对它们进行操作。例如,`.children()`、`.eq()`、`.addClass()`、`.removeClass()`等方法...
同时,还可以添加当前选中指示器,通常是一组与轮播项数量相同的“li”小圆点,选中状态可以通过改变颜色或背景来体现。用户点击这些小圆点时,轮播图也会相应切换到对应的项。 在实现这一功能的过程中,需要注意...
**jQuery 标签式导航菜单详解** 在网页设计中,导航菜单是不可或缺的一部分,它帮助用户轻松地在网站的不同部分之间切换。jQuery 提供了一系列强大的API和插件,使得创建动态、交互性强的导航菜单变得非常简单。本...
在这个“jQuery标签切换效果”的主题中,我们将深入探讨如何使用jQuery实现动态内容切换,使得用户可以轻松地在多个内容块之间进行浏览。 首先,我们需要了解标签切换的基本原理。标签切换通常用于展示多组内容,...
在本文中,我们将深入探讨jQuery中的Tab标签实现,以及如何通过JavaScript代码来创建和管理这样的交互式用户界面元素。Tab标签是一种常见的网页设计模式,它允许用户在多个内容区域之间轻松切换,通常用于组织和展示...
每个Tab项都是一个链接或者按钮,通过类名来区分不同的状态,如“active”表示当前选中的Tab。例如: ```html <li class="tab active"><a href="#">Tab 1</a></li> <li class="tab"><a href="#">Tab 2</a></li...