javascript - 我如何在点击按钮时隐藏某种样式并显示不同的样式

* {
	margin: 0;
	padding: 0;
}

#logo {
	width: 100%;
	text-align: center;
}

#logocaption {
	text-align: center;
	width: 100%;
}

#page1caption {
	text-align: center;
	padding: 0 0 20px 0;
}

#next1 {
	background-color: transparent;
	border-radius: 6px;
	border: solid 3px;
	display: block;
	margin: 0 auto;
	padding: 20px 50px 20px;
}

button:focus { 
	outline:0 !important; 
}

#next1:hover {
	background-color: black;
	color: white;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Template One</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="author" content="Carl Hansen">
		<link rel="stylesheet" type="text/css" href="CSS/styles.css">
		<link rel="stylesheet" type="text/css" href="CSS/MEDIAQ/mediaqueries.css">
		<script src="button.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title>Web4Ever</title>
	</head>

	<body>
		<div class="container">
			<div id="page1">
				<div id="logo"><img src="logo.jpg"></div>
				<h1 id="logocaption">THE FUTURE <br> IS WEIRD</h1>
				<br>
				<p id="page1caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>
				luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
				<button id="next1">Next  <span class="glyphicon glyphicon-chevron-right"></span></button>
			</div>

			<div class="page2">
				
			</div>

			<div class="page3">
				
			</div>

			<div class="page4">
				
			</div>
		</div>
	</body>
</html>

When i click on my button i want to hide my current style and display another style that was previously hidden. Heres what i want to happen when i click the first button it will hide #page1 and display #page2 so on and so on. while i havent clicked on the buttons on seperate pages the other pages are hidden until i click them so its basically like a carousel in a complicated way

最佳答案

我认为你需要 jQuery RemoveClass

在您的按钮点击事件中删除您不想要的类...

例如:

<div id="mycontent"> My content</div>
<button id="someEvent">Next</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#someEvent").on('click', function(){
       $("#mycontent").removeClass('class_name') /* if you want to remove some style under class */
       $("#mycontent").addClass('class_name') /* if you want to show or add class */
    })
</script>

关于javascript - 我如何在点击按钮时隐藏某种样式并显示不同的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45386073/

javascript - 我如何在点击按钮时隐藏某种样式并显示不同的样式

上一篇：javascript - 如何使用 HTML5 Canvas 水平翻转 Sprite ？

下一篇：html - 更改整个 R Shiny App 的字体系列 : CSS/HTML