Javascript显示和隐藏功能
Javascript show and hide function
我正在尝试使用一些容器和文本执行显示/隐藏功能。当我单击某个容器时,我希望隐藏一个段落。目前,当我单击"left"
容器时,我正在尝试解决该段落"barbertext"
消失。
<p class="hairtext" style="color:red">We are Thairapy, an independent hair <br> and beauty Salon located in the heart<br> of Exeter. At Thairapy, we care about<br> our clients and our main aim is to go<br> that extra mile and look after every <br> one of our happy customers.</p>
<p class="beautytext" style="color:red">Our beautician, Shail Dutt has over<br> 10 years of experience within the beauty<br> industry. Shail is a very dedicated and<br> passionate person, she strives to make<br> her clients feel loved and special. </p>
<p class="barbertext" style="color:red">A decent Mens haircut needn't cost the<br>Earth. We offer top quality Men's haircuts<br> from £7. </p>
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
我正在使用的Javascript是这样的:
<script>
$(document).ready(function(){
$("#hairtext").click(function(){
$("barbertext").hide();
});
$("#hairtext").click(function(){
$("barbertext").show();
});
});
</script>
如果有人能帮忙,我将不胜感激。
将两个处理程序绑定到同一元素,因此每次单击时都会隐藏和显示。
尝试toggle()
,使其在隐藏/显示之间交替
$(document).ready(function(){
$(".hairtext").click(function(){
$(".barbertext").toggle();
});
});
(需要将.
添加到理发文本选择器,并为发型文本添加.
。 #
用于 ID)
我做了以下小提琴,应该可以满足您的需求 http://jsfiddle.net/Lyd9hgh2/
$(document).ready(function(){
var hidden= false;
$("#left").click(function(){
if(hidden){
$(".barbertext").show();
hidden = false;
}else
{
$(".barbertext").hide();
hidden = true;
}
});
});
你的选择器做错了:
$(".barbertext")
我不确定你想要什么,但当用户单击容器时,似乎你想要,显示/隐藏一个关联的div。我为此创建了一个小提琴:http://jsfiddle.net/BenoitNgo/0yL02nop/6/
更正了现有代码:(根据您的需要 - 当我单击"左"容器时,"理发文本"段落消失)
<script>
$(document).ready(function(){
$("#left").click(function(){
$(".barbertext").hide();
});
$("#left").click(function(){
$(".barbertext").show();
});
});
</script>
改进:
- 您可以将 Id 用于容器和段落以提高性能 如果你想
- 在容器单击时显示/隐藏行为,你可以使用 jquery 切换函数
相关文章:
- jQuery插件与其他基本的显示/隐藏功能冲突
- 如何分解jQuery"toggle”;函数转换为separate“;显示“;以及“;隐藏“;功能
- 如何在应用切换点击功能之前,默认情况下在页面加载时隐藏带有特定类的ul-li
- Jquery悬停功能显示和隐藏元素
- 显示/隐藏功能
- 隐藏/显示加载功能不起作用
- 单击时隐藏和显示功能
- Jquery使用'显示'和'隐藏'点击功能
- 如何在 OpenLayers 3 中隐藏和显示功能?(重绘?
- 使用 JavaScript 显示和隐藏导航栏进行滚动和悬停功能
- Javascript显示和隐藏功能
- 显示/隐藏jQuery菜单单击功能
- 在按钮单击时显示 gif,并在 asp.net 中功能完成后隐藏
- 为什么这个隐藏显示功能不起作用
- jQuery功能,用于隐藏基于未在点击上运行的HTML5数据标签的元素
- 如何使 Dreamweaver AP Div 显示/隐藏功能在 IE9 中工作
- 灯箱“下一个”功能仍然显示已隐藏的元素 (li) 显示:无;
- 响应式JavaScript – 加载/隐藏与浏览器宽度相关的特定功能
- 设备就绪隐藏功能
- 我的显示/隐藏功能代码出了什么问题