当我单击按钮并显示不同的样式时，如何隐藏某种样式

时间：2017-07-29 06:24:21

标签： javascript html css html5 css3 

* {
	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

3 个答案:

答案 0 :(得分：1)

我认为你需要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>

答案 1 :(得分：1)

我已尝试使用您的代码，我使用jquery以下列方式完成了它。你可以看到我在按钮上使用点击事件来显示/隐藏页面。

            $(function () {
                $('.page-block').hide();
                $('#page1').show();
                $(".btn").click(function (e) {
                    var pageId = $(e.target).data('target');
                    $('.page-block').hide();
                    $('#' + pageId).show();
                });
            });
* {
	margin: 0;
	padding: 0;
}

.c-btn {
margin-left: 10px;
}
<!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">
        <!-- 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 class="row">
                <div class="col-sm-12 page-block text-center" id="page1">
                    <h3>Page 1</h3>
                    <p id="page1caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page2">
                    <h3>Page 2</h3>
                    <p id="page2caption">Page 2, Page 2, Page 2d <br> Page 2e. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page3">
                    <h3>Page 3</h3>
                    <p id="page3caption">Page 3it amet, consectetuPage 3elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page4">
                    <h3>Page 4</h3>
                    <p id="page4caption">Page 4 Page 4m doPage 4or Page 4 amet, consectetur adipisicing elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat
                        sed adipiscing.</p>
                </div>
            </div>
            <div class="row" style="margin-top: 25px;">
                <div class="col-sm-12 text-center">
                    <button data-target="page1" class="btn btn-primary c-btn" id="btn-1" >Page 1</button>
                    <button data-target="page2" class="btn btn-primary c-btn" id="btn-2" >Page 2</button>
                    <button data-target="page3" class="btn btn-primary c-btn" id="btn-3" >Page 3</button>
                    <button data-target="page4" class="btn btn-primary c-btn" id="btn-4" >Page 4</button>
                </div>
            </div>
        </div>

    </body>

</html>

答案 2 :(得分：0)

不确定您的需求究竟是什么，但听起来jQuery可能就是您所需要的。它是一个javascript库，专门用于使这样的任务更简单。

我在这里使用click和toggleClass方法来切换样式。

希望这有帮助！

$("#example").on('click', function() {
  $(this).toggleClass("foobar");
})
#example {
  color: #555;
  font-size: 20px;
  padding: 10px;
}

.foobar {
  color: coral;
  border: 2px solid coral;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="example">Click Me</div>

修改：要使此功能和任何其他jQuery生效，您必须引用jQuery中的html库。如果您使用cdn，只需将以下内容放在html的<head>标记之间：

 <script
  src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
相关问题
最新问题