jquery点击显示隐藏,jquery点击显示隐藏切换

如何通过jquery隐藏和显示元素

1.JQ中显隐有以下几种方式

青川网站建设公司成都创新互联公司,青川网站设计制作，有大型网站制作公司丰富经验。已为青川近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的青川做网站的公司定做！

show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作

2.show()方法

显示出隐藏的 p 元素。

$(".btn2").click(function(){

$("p").show();

});

3.toggle()方法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle(1000);

});

});

/script

/head

body

pThis is a paragraph./p

button class="btn1"Toggle/button

/body

/html

3.slideDown()方法

以滑动方式显示隐藏的 p 元素：

$(".btn2").click(function(){

$("p").slideDown();

});

4.hide() 方法

隐藏可见的 p 元素：

$(".btn1").click(function(){

$("p").hide();

});

这个函数经常与show一起使用

5.css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

$("p").css("display","none");

实例：

!DOCTYPE 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

script type="text/javascript" 

$(document).ready(  function(){}); 

function hiden(){ 

$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast 

} 

function slideToggle(){ 

$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 

} 

function show(){ 

$("#divObj").show();//显示,参数说明同上 

} 

function toggle(){ 

$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 

} 

function slide(){ 

$("#divObj").slideDown();//窗帘效果展开 

} 

/script 

/head 

body 

h3div里内容的显示隐藏特效/h3 

input type="button" value="隐藏" onclick="hiden()"/ 

input type="button" value="显示" onclick="show()"/ 

input type="button" value="窗帘效果显示2" onclick="slide()"/ 

input type="button" value="窗帘效果的切换" onclick="slideToggle()"/ 

input type="button" value="隐藏显示效果切换" onclick="toggle()"/ 

div id="divObj" style="display:none" 

1.测试例子br/ 

2.测试例子br/ 

3.测试例子br/ 

4.测试例子br/ 

5.测试例子br/ 

6.测试例子br/ 

7.测试例子br/ 

8.测试例子br/ 

9.测试例子br/ 

0.测试例子br/ 

/div 

/body 

/html

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

示例html

div class="abc" style="display:none"/div

input type="button" class="but" /

最简单的方法：

script

$(document).ready(function(e) {

$(".but").click(function(e) {

$(".abc").toggle();

});

});

/script

toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。

------

如果你除了显示和隐藏之外还需要同时实现其他功能的话，可以这样：

script

$(document).ready(function(e) {

$(".but").click(function(e) {

if( $(".abc").hasClass("show") ){

// 执行隐藏

$(".abc").hide().removeClass("show");

// 其他

}else{

// 显示

$(".abc").show().addClass("show");

}

});

});

/script

这里通过自定义一个 class : show 来判断 div 是显示或隐藏

hasClass() 是否存在某个class

hide() 隐藏对象

show() 显示对象

removeClass() 移除一个class

addClass() 添加一个class

除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

PS：jquery如何删除div里面的某个div

思路：首先获取到需要删除的对象，然后使用jQuery提供的 remove() 方法删除被选元素及其子元素。

例如，对于如下的HTML结构：

div id="test"

div id="test1"/div

div class="test2"/div

div class="test2"/div

div/div

/div

1、删除id为test1的div

首先使用id选择器获取元素，然后使用remove()函数删除，相应代码为：

$("div#test1").remove();

2、删除所有class为test2的元素

$("#test div.test2").remove();   // 或者  $("div").remove("#test .test2");

3、删除最后一个div

虽然该div没有id及class属性，但是可以从其位置关系上获取然后删除之：

$("#test div:last").remove();

用jquery怎么实现点击显示，再一次点击隐藏

用jquery实现点击显示，再一次点击隐藏的方法是使用toggle方法。

说明：toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

举例说明：

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle(1000);

});

});

/script

/head

body

pThis is a paragraph./p

button class="btn1"Toggle/button

/body

/html

代码解读：

$(".btn1").click(function(){

$("p").toggle(1000); //控制文件This is a paragraph的显示和隐藏，如果当前是显示的，点击就隐藏了。

});

jQuery里面隐藏和显示效果怎么写?

1、jquery.show()和jquery.hide()方法

语法：

$(selector).show(speed,callback);

$(selector).hide(speed,callback);

2、jquery.toggle()方法

语法：

$(selector).toggle(speed,callback);

3、带有淡入淡出效果的显示和隐藏

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeToggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

4、带有滑动效果的显示和隐藏

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

注意：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jequery如何在点击一个按钮时使用jquery隐藏一个元素

jequery在点击一个按钮时使用jquery隐藏一个元素是jQuery提供了toggle()函数用于切换显示和隐藏：显示被隐藏的元素，隐藏已显示的元素，示例代码。

拓展资料：

html代码如下：其中有一个button和一个div

input type="button" value="button"/

div id="mydiv"/div2.

js代码如下：

$(function(){

$('input:button').click(function(){ $('div').fadeToggle() }

默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做?

这个功能其实很容易实现，我在这告诉你思路一个思路和步骤：

1、把要显示的原样输出，作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏；

2、给查看更多绑定点击事件，点击后show你要展示的内容；

实际代码如下：html 代码

Jquery代码：

扩展资料

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

参考资料：百度百科 jQuery