Dúvida Gabi

<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8"/>

        <link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.min.js"></script>


		<nav class="navbar navbar-default">
		  <div class="container-fluid">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			  <ul class="nav navbar-nav">
				<li class="active"><a href="#home"> <span class="glyphicon glyphicon-home" aria-hidden="true/"> Home <span class="sr-only">(current)</span></a></li>
				<li><a href="#about">About</a></li>
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
				  <ul class="dropdown-menu">
					<li><a href="#op">Opções de 1 a 5</a></li>
					<li><a href="#painel">Painel</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="#tabela">Table</a></li>

				  </ul>
				</li>
			  </ul>
			</div>
		  </div>
		</nav>


	</head>

	<body>

		<style type="text/css">

			.btn-group-vertical{
				width: 20%;

			}

		</style>


		<section id="home" align="center" style="display:none" onclick="exibirhome();">
		  <img src="C:\Users\DELL\Desktop\CC - FUMEC\1º Semestre 2 de 2017\Introdução a programação web\Auto Instrucional\Banner.png" class="img-fluid" alt="Responsive image">
		</section>

		<section id="about" class="jumbotron" style="display:none" onclick="exibirabout();">
			<span class="glyphicon glyphicon-user" aria-hidden="true"></span><h1 align="center"><span class="label label-default">About</span> </h1>
			<h2><span class="label label-primary"> Gabriela do Carmo Nascimento Leocadio</span></h2>
			<h2><span class="label label-success"> 1A226414071 </span></h2>
		</section>


		<section id="op" class="btn-group-vertical" role="group" aria-label="..." style="display:none" onclick="exibirop();">
			<button type="button" class="btn btn-primary medio" style="text-align: left" id="op1"> Opção 1</button>
			<button type="button" class="btn btn-default medio" style="text-align: left" id="op2">Opção 2</button>
			<button type="button" class="btn btn-default medio" style="text-align: left" id="op3">Opção 3</button>
			<button type="button" class="btn btn-default medio" style="text-align: left" id="op4">Opção 4</button>
			<button type="button" class="btn btn-default medio" style="text-align: left" id="op5" >Opção 5</button>
		</section>

		<section id="painel" class="panel panel-success" style="display:none" onclick="exibirpainel();">
		  <div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		  </div>
		  <div class="panel-body">
			Panel content
		  </div>
		</section>

		<section id="tabela" class="panel panel-default" style="display:none" onclick="exibirtabela();">
		  <!-- Default panel contents -->
		  <div class="panel-heading"></div>
		  <!-- Table -->
		  <table class="table">
			<tr>
				<th> # </th>
				<th> First Name </th>
				<th> Last Name </th>
				<th> Username </th>
			</tr>

			<tr>
				<td> 1 </td>
				<td> Mark </td>
				<td> Otto </td>
				<td> @mdo </td>
			</tr>

			<tr>
				<td> 2 </td>
				<td> Jacob </td>
				<td> Thornton </td>
				<td> @fat </td>
			</tr>

			<tr>
				<td> 3 </td>
				<td> Larry </td>
				<td> The Bird </td>
				<td> @twitter </td>
			</tr>
		  </table>
		</section>

	</body>

	<script>

			function exibirhome() {

					$('#home').show();


			}

			function exibirabout() {

					$('#about').show();


			}

			function exibirpainel(){

				$('#painel').show();

			}

			function exibirtabela() {

					$('#tabela').show();


			}

			function exibirop() {

					$('#op').show();

					if( document.querySelector ('#op1')){
						<div class="alert alert-success" role="alert"> <strong> Opção 1!</strong> A opção 1 foi selecionada !</div>
					} else if( document.querySelector ('#op2')){
						<div class="alert alert-info" role="alert"> <strong> Opção 2! </strong> A opção 2 foi selecionada ! </div>
					} else if( document.querySelector ('#op3')){
						<div class="alert alert-warning" role="alert"> <strong> Opção 3! </strong> A opção 3 foi selecionada! </div>
					} else if( document.querySelector ('#op4')){
						<div class="alert alert-danger" role="alert"><strong> Opção 4! </strong> A opção 4 foi selecionada !</div>
					} else {
						<div class="alert alert-default" role="alert"><strong> Opção 5! </strong> A opção 5 foi selecionada!</div>
					}

			}
	</script>
</html>