<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="JavaScript">
function preview(DivId)
{
if(document.getElementById(DivId).style.display=='none')
{ document.getElementById(DivId).style.display=''; }
else
{ document.getElementById(DivId).style.display='none'; }
}
function download(file){
window.location.href=file;
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="box04" width="100%">
<tr>
<td align="center"><input type="button" class="anniu_bg1" onClick="preview('gift')" value="预览"/>
<input type="button" class="anniu_bg1" onClick="javascript:download('aa.xlsx')" value="下载"/>
</td>
</tr>
</table>
<br/>
<div id="gift" style=" display:none">
<table width="80%" border="0" cellspacing="0" cellpadding="0" class="box_title_bg2" align="center">
<tr class="box_title_bg1">
<td>abc</td>
<td>def</td>
<td>hij</td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td >121313</td>
<td>312321</td>
<td>13213213</td>
<td>343</td>
<td>w324</td>
<td>34324</td>
<td>56</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）
在给定代码中，我们可以看到整个页面结构非常清晰，主要包括两个部分：一个是用于触发内容切换的按钮区域（`<div class="list_shop">`），另一个是实际显示不同内容的区域（`<div class="shop_all">`）。 #### 按钮...
例如，可以通过添加`onclick`事件监听器来实现点击按钮隐藏或显示`Div`： ```html ()">点击我 <div id="myDiv">这是隐藏/显示的内容</div> function toggleMyDiv() { $('#myDiv').toggle(); } ``` 在这个例子中...
该函数的作用是将`$scope.show`属性取反，即如果原来是true就变成false，如果是false则变成true，这样就实现了点击按钮切换显示状态的功能，并且通过`console.log`在控制台输出当前的显示状态。 同理，`()">按钮...
()">点击切换div状态 <div id="myDiv" style="border: 1px solid black; padding: 10px;">这是一个可隐藏/显示的div</div> function toggleDiv() { var div = document.getElementById('myDiv'); if (div....
在jsp中利用单选按钮实现两个div之间的显示与隐藏
本文实例分享了点击按钮实现隐藏和显示的切换代码，供大家参考，具体内容如下 效果图： 在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此...
实践中，还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互行为，例如点击按钮触发显示隐藏效果，或者根据用户滚动页面自动显示和隐藏元素。对于前端开发者来说，理解和掌握这些技巧是提升网页动态...
简单实用的单选按钮切换div简单有效，可以直接看到效果
按钮点击隐藏显示 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> #object1, #object2 { display: none; /* 初始化对象为隐藏状态 */ } 显示对象1 显示对象2 <div id="object...
例如，可以使用`display`属性来隐藏或显示div，`position`属性进行定位，`transition`或`animation`来添加平滑的切换动画。 2. **JavaScript/jQuery**：如果仅使用CSS，只能实现静态的切换效果，而JavaScript或...
它利用JavaScript库jQuery来实现一个功能：当用户点击某个元素（如按钮）时，页面上的一个或多个div层（通常用于创建弹出框、提示信息或者内容区域）会显示出来。这种效果在现代网页设计中非常常见，可以提升用户...
当用户点击“上一张”或“下一张”按钮时，相应地改变幻灯片的显示状态。 jQuery代码示例： ```javascript $(document).ready(function() { var $slider = $('#slider'); var $slides = $slider.find('.slide'); ...
在网页设计和开发中，"点击按钮切换页面，版面滑动切换"是一种常见的交互模式，用于优化用户体验，尤其是在信息量大或者需要展示多个部分内容的场景下。这种设计允许用户通过点击特定按钮来平滑地在不同版面之间切换...
例如，我们可以使用`display: none`和`display: block`来控制图片的隐藏与显示，或者使用CSS3的`transition`和`animation`属性实现平滑的图片切换效果。 3. **HTML**：HTML构建了轮播的基础结构，包括图片容器、...
我们还添加了一个按钮，当点击时调用JavaScript函数`toggleDiv`，这个函数会根据`div`当前的显示状态切换其显示与否。 除了`display`属性，还可以使用`visibility`属性来实现类似的效果。`visibility: hidden`会让...
点击该按钮时，会触发JavaScript函数`toggleDiv`，该函数通过修改`div1`和`div2`的`display`属性来切换它们的可见性。这种方式的优点是可以即时响应用户的操作，提高用户体验。 #### 四、小结 通过上述讨论可以...
通过绑定点击事件到按钮上，我们可以切换DIV的可见性。以下是一个简单的示例： ```javascript $(document).ready(function() { // 当页面加载完成后执行此函数 $("#toggleBtn").click(function() { // 获取ID为...