Question

我试图学习一些基本的Javascript。我有三个简单的按钮。我想单击事件按钮，隐藏联系人和媒体容器并显示事件容器。这是我正在做的......

$(".events, .events-close").click(function(){
    $(".contact-container, .media-container").fadeOut(500, function(){
        $(".events-container").fadeToggle();
    });
});

Answer 1

假设您只需要为所有xxx容器使用切换。因为你想用包含.events和.events-close类的按钮切换所有这些按钮这是js：

$(".events, .events-close").click(function(){
  $(".contact-container").fadeToggle( "slow", "linear" );
  $(".media-container").fadeToggle( "slow", "linear" );
  $(".events-container").fadeToggle( "slow", "linear" );
});

在css中你只需：

.events-container {
  display: none; //this makes the container "invisible" at page load time
}
.media-container {
  opacity: 100; //this makes the container "visible" at page load time
}
.contact-container {
  opacity: 100; //this makes the container "visible" at page load time
}

因为fadeToggle方法通过增加元素或根据元素的实际值减小它来操作元素的不透明度属性。

查看.fadeToggle（）的文档：here

它说：

.fadeToggle（）方法可以设置匹配元素的不透明度。在可见元素上调用时，一旦不透明度达到0，元素的显示样式属性将设置为无，因此该元素不再影响页面的布局。

希望我能帮到你！

Answer 2

让我们看看你有三个按钮好了......你想要处理每个按钮的click events吗？然后...在点击事件上你想显示/隐藏一些<div>？

这是一个简单的例子......

＆＃13;

$(function(){

// Let's handle the buttons events
$('#btnContact').on('click', function(){
	$("#divContact").fadeIn('slow');
	$("#divMedia").hide();
	$("#divEvents").hide();

});
$('#btnMedia').on('click', function(){
	$("#divContact").hide();
	$("#divMedia").fadeIn('slow');
	$("#divEvents").hide();

});
$('#btnEvent').on('click', function(){
	$("#divContact").hide();
	$("#divMedia").hide();
	$("#divEvents").fadeIn('slow');

});
});

＆＃13;

.hideDiv{
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	<!-- Latest compiled and minified CSS & JS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!-- JQuery 1.12.4 Google Hosted Library  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
		<!-- The buttons -->
			<button id="btnContact" class="events btn btn-success">Contact</button>
			<button id="btnMedia" class="events btn btn-warning">Media</button>
			<button id="btnEvent" class="events btn btn-danger">Events</button>
		</div>
		<!-- your divs... -->
		<div class="row hideDiv" id="divContact">
			<h3>Contact</h3>
			<p>Your HTML content here...</p>
		</div>
		<div class="row hideDiv" id="divMedia">
			<h3>Media</h3>
			<p>Your HTML content here...</p>
		</div>
		<div class="row hideDiv" id="divEvents">
			<h3>Events</h3>
			<p>Your HTML content here...</p>
		</div>
	</div>
</body>
</html>

＆＃13;

如何使用Javascript制作简单的fadeToggle导航/网站？

2 个答案: