控制div显示隐藏(有文字图片介绍)

<div class="toggle">
<p id="zi">收起</p>
<p id="zhe"><img src="images/up.png" width="20"/></p>
</div>

$(function() {
$(‘.toggle‘).click(function() {
$(‘.headerwrap‘).slideToggle(function() {
var res = $(this).is(‘:visible‘);
if (res) {
$("#zi").text("收起");
$(‘#zhe‘).html("<img src=‘images/up.png‘ width=‘20‘/>");
} else {
$("#zi").text("展开");
$(‘#zhe‘).html("<img src=‘images/down.png‘ width=‘20‘/>");
}

});
});
})

时间: 2024-10-09 22:23:40

控制div显示隐藏(有文字图片介绍)的相关文章

原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱

功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱: 实现: 保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了. 一.方式1:隐藏后仍占有页面空间,显示空白 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;"document.getElementById("typediv1").styl

js控制div显示与隐藏

<!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/xhtml"><head><meta http-equiv="Content-Typ

利用div显示隐藏实现的分页效果

实现步骤: 1.创建对应切换div <div class="bottom_daohang"> <div class="bottom_daohang_zong"> <div class="bottom_daohang_left value_left ace"><</div> <div id="bianse1" class="bottom_daohang_num

HTML学习笔记3——CSS控制DIV显示练习

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS control DIV display</title> 6 <style type="text/css"> 7 #header 8 { 9 width:200px; 10 height:100px;

JQuery 控制元素显示隐藏

JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏,然后通过点击 更多类目 来切换 隐藏与显示 <style>.hide{display:none;}<style> <div class="seach-guide"> <div class="item clearfix">3

python控制窗口显示隐藏

import win32con # 定义 import win32gui # 界面 import time # 时间 QQ= win32gui.FindWindow("Notepad","无标题 - 记事本") for num in range(120): time.sleep(1) if num%2 == 0: win32gui.ShowWindow(QQ, win32con.SW_HIDE) # 设置隐藏 else: win32gui.ShowWindow(QQ

鼠标悬停显示隐藏省略文字

.title_content{ font-size:14px; margin: 10px 5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .title_content:hover{ text-overflow:inherit; overflow: visible; white-space: pre-line; } <div  class='title_content'>隐藏ellipsis</div&

【转】仿Android 联系人SideBar排序,根据拼音A-Z字母快速导航,以及输入搜索条件过滤,显示姓名的文字图片

1.首先我们把这几个工具类拷贝到自己的项目中,这些都是很常见的类: CharacterParser       –这是用来把中文转成拼音的工具类 PinyinComparator   –拼音首字母的比较器 SideBar                    –右侧的竖条,显示的是二十六个字母以及*,和#号 SortModel               –放排序name和key的bean 1 public class CharacterParser { 2 private static int

jsp页面中显示二维码图片

最近做的一个项目需要在前台页面显示二维码:因为以前做过二维码生成方面的东西,就沿用以前的方式:导入qrcode.jar包,然后后台生成图片保存,前台获取图片的路径,并显示.大家可以看得出来这个过程是比较耗时的,一个人测试半小时,会有好几百张二维码图片,那么后台生成的临时二维码图片什么时候删除呢?第一种选择是我前台显示后立即删除,因为系统需求的原因,这样交互会很频繁,影响效率:第二种选择是job定时去删除.两种方式虽然都能解决问题但都有点勉强. 能不能在前台把数据封装成二维码呢?YES,回答如此的