1.html代码
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="../../../Jquery/jquery-1[1].3.2.min.js"></script>
<script type="text/javascript" src="Jquery/JqueryText2.js"></script>
<link type="text/css" rel="Stylesheet" href="css/JqueryTest2.css" ></link>
</head>
<body>
<div id="testDiv"></div>
<div id="btnParent">
<h3>显隐</h3>
<div id="switcher-normal" class="button selected">normal</div>
<div id="switcher-norrow" class="button">norrow</div>
<div id="switcher-large" class="button" value="large">large</div>
</div>
</body>
</html>
2.css样式
.hiden
{
display:none;
}
.button {
width: 100px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
3.Jquery代码
$(document).ready(function(){
// $("#testDiv").html("<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>");
// $("#switcher-normal").bind("click",function(){
// $("#btnParent .button").removeClass("selected");
//
// });
var dishid=function(){
$("#btnParent .button").toggleClass("hiden");
};
//点击id=btnParent 下h3标签就会触发名为dishid的针对于此id下所有class为button，把它的css样式转换为hiden
$("#btnParent h3").click(dishid);
});
$(document).ready(function(){
//为id=btnParent下所有class为button的标签添加鼠标悬停事件，也就是鼠标经过效果hover(经过的效果函数，移出的效果函数)
$("#btnParent .button").hover(
function(){
$(this).addClass("hover");
}
,function(){
$(this).removeClass("hover");
});
});
分享到：
相关推荐
为了实现滑动控制div显隐，我们需要在`touchstart`事件中记录初始触摸位置，在`touchmove`事件中计算滑动距离，并在`touchend`事件中判断滑动方向。如果滑动达到一定阈值，就可以切换对应的div的显示状态。例如，...
4. **切换区块**：当区块发生变化时，可以使用CSS的`toggleClass`或者修改内容的显隐状态来实现切换效果。 以下是一个简单的示例代码： ```javascript $(document).ready(function() { var sections = $('....
然后，在`testshow.js`中，我们可以编写以下JavaScript代码来实现点击按钮时显示或隐藏内容： ```javascript document.getElementById('toggleBtn').addEventListener('click', function() { var target = ...
本篇文章将深入探讨如何在React应用中实现这一功能，并结合实际代码示例进行详细讲解。 首先，我们需要理解React组件的基本结构。React组件是构建用户界面的独立、可复用的代码块。在这个场景下，我们可以创建一个...
现在，我们需要通过JavaScript来监听这个按钮的点击事件，当用户点击时，切换`<input>`元素的`type`属性。如果`type`为`password`，则更改为`text`，显示密码；反之，隐藏密码。 ```javascript document....
最后，我们使用`toggle()`方法来实现显隐之间的来回切换。 二、滑块动画 滑块动画是指元素的滑动动画，可以使用`slideDown()`、`slideUp()`和`slideToggle()`方法来实现。例如： ``` $(function(){ $(selector)....
在本实例中，我们看到一个名为`SDMenu`的构造函数被用来实现一个菜单的滑动显隐效果。这个构造函数是专门为创建具有特定行为的菜单对象而设计的。 首先，`SDMenu`构造函数接收一个参数`id`，该参数通常是菜单容器的...
3. jQuery代码：绑定点击事件到每个标题元素上，当点击时，使用`.slideToggle()`方法来切换内容区的可见性。`.slideToggle()`会创建一个平滑的展开或收缩动画效果。 以下是一个简单的jQuery手风琴菜单实现示例： `...
上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。
这可以通过CSS3的`transition`属性和JavaScript的显隐控制相结合实现： ```css #slideshow img { opacity: 0; transition: opacity 1s ease-in-out; } ``` ```javascript function rotateImages() { var next...
实现这一功能，我们可以创建一个图标或者文字作为切换按钮，使用Bootstrap的类如`.btn`、`.btn-default`、`.glyphicon-eye-open`、`.glyphicon-eye-close`等来美化样式。当用户点击这个按钮时，我们通过JavaScript...
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，...代码实现 vue.js： //定义一个select下拉菜单 类型> 表结构变更 value=tableChange> <el-option label=接口变更 va
用户点击这个图标时，会触发一个事件处理函数`SwitchPassDis`，该函数将`switchPassDisFlag`值设置为`true`，从而切换到密码显示状态。 4. **密码显示状态**：当`switchPassDisFlag`为`true`时，密码输入框是可见的...
jQuery的手风琴功能，通过控制元素的显隐和高度变化，实现了类似手风琴开合的效果。 二、实现手风琴的基本步骤 1. 引入jQuery库：首先，需要在HTML文件中引入jQuery库，通常通过CDN链接或者本地路径引入。 ```...
当用户点击“Toggle”按钮时，会改变输入框的`type`属性，从而在密码和文本模式之间切换。 ```javascript $(document).ready(function() { $("#togglePassword").click(function() { var input = $("#password")...
3. **事件监听**：`v-on:click`可能会用于监听Tab标题的点击事件，切换当前选中的Tab。 4. **计算属性与方法**：计算属性可以用来处理和过滤数据，方法则可以执行更复杂的逻辑，如切换Tab时更新当前索引。 5. **生命...
结合给定文件内容，我们可以推测，用户可能希望实现一种点击按钮（可能隐藏在文本中或位于其他地方），然后实现页面上某个文本块周期性地显示和隐藏。具体实现的代码可能会涉及以下结构： ```html <!DOCTYPE html> ...
8.2.htm 图像切换 8.3.htm 点亮文本 8.4.htm 鼠标跟随 8.5.htm 鼠标感应 8.6.htm 禁用鼠标按键 第9章（\cha09） 9.1.htm 文字的垂直滚动 9.2.htm ...