jQuery多项选项卡的实现

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

css样式:

@CHARSET "UTF-8";

#div{

margin-bottom:10px;

position:relative;

}

#div1{

width:153px;

padding-top:0px;

padding-left:0px;

position:absolute;

}

#div1 ul{

margin-top:0px;

padding-left:0px;

background-color:#ccc;

list-style:none;

}

#div1 ul li{

padding-left:0px;

}

#div1 ul li input{

margin-left:15px;

}

.close{

display:none;

}

.open{

display:block;

}

jquery代码:

$(function(){

var position = $("#xx").position();

$("#div1").offset({ top:position.top+35,left:position.left+10});

$("#xx").click(function(){

$("#NG").toggleClass("open");

});

$("#div1 input[name=ng]").click(function(){

var arr = new Array();

$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();});

$("#xx").val(arr.join(","));

});

});

html代码:

<div id="div">

<div align="center" id="div2" >

<form id="form1">

<input type="text" readonly="readonly" id="xx"/>

<input type="submit"  value="查询"/>

</form>

</div>

<div  id="div1">

<ul  class="close" id="NG" >

<li><input type="checkbox" name="ng" value=1 />1</li>

<li><input type="checkbox" name="ng" value=2 />2</li>

<li><input type="checkbox" name="ng" value=3 />3</li>

</ul>

</div>

</div>

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

jQuery多项选项卡的实现,布布扣,bubuko.com

时间: 2024-10-11 10:36:23

jQuery多项选项卡的实现的相关文章

jquery实现的选项卡的嵌套代码实例

jquery实现的选项卡的嵌套代码实例:关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容.通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta na

基于jquery左侧带选项卡切换的焦点图

今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="film_focus"> <div class="film_focus_desc"> <h3> 标题1</h3> <ul class="film_focus_nav"> <li clas

jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能)

效果图 tab.html <!DOCTYPE html> <html lang="zh-CN"><!-- 设置简体中文 --> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="../css/base.css"> <lin

jquery实现网页选项卡

这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&

Jquery&amp;JS简单选项卡

结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一:  ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中,又设定行高. 要点二:ul的高度与要显示的选项li的高度相等,因为li要把ul的底边掩盖掉.其他不显示的li的行高设置ul的高度-1,留出1个像素的底边显示. <style type="text/css"> *{margin:0; padding:0; font:12px/1

js和jquery实现tab选项卡

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Create by double 2015-07-09&quo

实现jquery EasyUI tabs选项卡关闭图标后加载自定义事件

项目中当关闭tabs选项卡时,底部footer需要通过javascript重新定位calcFooter(),如何实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClose中不起作用,API中没有关闭后的方法,但有个关闭之前的方法onBeforeClose,在onBeforeClose方法中先实现onClose()方法,再calcFooter(),再return false,这样就达到要的效果 代码如下: $('#tt').tabs({ onBeforeClo

jQuery实现Tab选项卡切换

需求: 实现Tab选项卡切换,鼠标悬浮在标签上,进行Tab页面的切换 此处使用的是jQuery1.7.js 实现代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

利用jQuery实现Tab选项卡

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">{margin: 0px;padding: 0px;font-family: 微软雅黑;}.menu{height: 50px;background: #272822;}.menu a{display: bloc