jQuery实现多个li点击切换和显示隐藏

html-css011

jQuery实现多个li点击切换和显示隐藏,第1张

1、新建HTML文件。

2、引入jquery.min.js文件。

3、创建HTML内容。

4、预览效果如图。

5、用jquery创建点击事件,点击隐藏按钮,p内容隐藏。

6、用jquery创建点击事件,点击显示按钮,p内容显示。

7、预览如图当点击隐藏按钮,p内容隐藏。

可以说清楚点吗?是想要div隐藏还是自定义一个属性不显示呢?

如果是隐藏div就直接:$("div").hide()或者添加css:$("div").css("display","none")

如果是添加自定义属性不显示那么属性名称尽量不要和元素本来有的一样:

$("div").attr("varid","21321")

根据input的class或者ID值定位元素,获得input的value值。

假设input的class为name:

var name = $('.name').val()

console.log(name)

或者是:

var name = $('.name').attr('value')

console.log(name)

扩展资料:

jQuery显示隐藏div的方法:

1、attr():

隐藏div:$("#demo").attr("style","display:none")

显示div:$("#demo").attr("style","display:block")

2、css():

隐藏div:$("#demo").css("display","none")

显示div:$("#demo").css("display","block")

3、hide(),show():

隐藏div:$("#demo").hide()

显示div:$("#demo").show()

4、动态显示和隐藏:

$("#demo").toggle(

function () {

$(this).attr("style","display:none")//隐藏div

},

function () {    $(this).attr("style","display:block")//显示div

}

)