Show / Hide div when clicking menu

Question

Show / Hide div when clicking menu

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Well, I have a problem with the code, I intend to press a Menu button to hide all the DIV except one, but it is not working, can someone help me please?

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: 84.8%;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #3db2e1;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #3db2e1;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
}


html {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0px;
	left: 10%;
    height: 10%;
    width: 80%;
	border: 0px solid #165480;
}

#cima{
	width: 99%;
	position: absolute;
	
}

#logo{
    width: 40%;
	position: absolute;
	left: 10%;
	top: 2%;
}

#sect1{
	border: 1px solid #165480;
	width: 80%;
	height: 75%;
	position: absolute;
	left: 10%;
	top: 15%;
	background-color: #eef9ff;
	background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sect2{
	border: 1px solid #165480;
	width: 80%;
	height: 75%;
	position: absolute;
	left: 10%;
	top: 15%;
	background-color: #eef9ff;
	background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sect3{
	border: 1px solid #165480;
	width: 80%;
	height: 75%;
	position: absolute;
	left: 10%;
	top: 15%;
	background-color: #eef9ff;
	background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sect4{
	border: 1px solid #165480;
	width: 80%;
	height: 75%;
	position: absolute;
	left: 10%;
	top: 15%;
	background-color: #eef9ff;
	background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sect5{
	border: 1px solid #165480;
	width: 80%;
	height: 75%;
	position: absolute;
	left: 10%;
	top: 15%;
	background-color: #eef9ff;
	background-repeat: no-repeat;
    background-size: 100% 100%;
}
	
#menu{
	position: absolute;
	left: 48%;
	top: 30px;
	width:50%;
}

body,td,th {
	font-size: 12px;
}

.sombra
{
text-shadow: 0.1em 0.1em 0.05em #333
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDG - Empresa</title>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="mdg.css">
   <script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
   <script src="script.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("li").click(function(event){
			var link = $(this);				
			if(link.attr("id").match("menuinicio"))
			$("#sect1").show("slow");
			$("#sect2").hide("slow");
			$("#sect3").hide("slow");
			$("#sect4").hide("slow");
			$("#sect5").hide("slow");
			else if(link.attr("id").match("menuempresa"))
			$("#sect2").show("slow");
			$("#sect1").hide("slow");
			$("#sect3").hide("slow");
			$("#sect4").hide("slow");
			$("#sect5").hide("slow");
			else if(link.attr("id").match("menuprodutos"))
			$("#sect3").show("slow");
			$("#sect1").hide("slow");
			$("#sect2").hide("slow");
			$("#sect4").hide("slow");
			$("#sect5").hide("slow");
			else if(link.attr("id").match("menuempresa"))
			$("#sect4").show();
			$("#sect1").hide();
			$("#sect2").hide();
			$("#sect3").hide();
			$("#sect5").hide();
			else
			$("#sect5").show("slow");
			$("#sect1").hide("slow");
			$("#sect2").hide("slow");
			$("#sect3").hide("slow");
			$("#sect4").hide("slow");
		});
	})
</script>
</head>
<body>
<video autoplay loop id="bgvid">
<source src="media/mdg.mp4" type="video/mp4">
</video>
<div id="cima">
<div id="logo">
<img src="media/logo.png" alt="MetalurgiaDulceGavina" title="MetalurgiaDulceGavina" width="199" height="73">
</div>
<div id="menu">
<div id='cssmenu'>
<ul>
   <li class='active'>
   <li id="menuinicio"><a href='#'>Inicio</a></li>
   <li id="menuempresa"><a href='#'>Empresa</a></li>
   <li id="menuprodutos"><a href='#'>Produtos</a></li>
   <li id="menunoticias"><a href='#'>Noticias</a></li>
   <li id="menucontacto"><a href='#'>Contactos</a></li>
</ul>
</div>
</div>
</div>
<div id="sect2"><p>2</p></div>
<div id="sect3"><p>3</p></div>
<div id="sect4"><p>4</p></div>
<div id="sect5"><p>5</p></div>
<div id="sect1"><p>1</p></div>
<footer align="center">
      <pre><small><strong><u>Copyright© 2015 MDG - Metalurgia Dulce Gavina, Unipessoal, Lda.</u></strong></small></pre>
      <pre class="sombra"><strong>Something</strong></pre>
</footer>
</body>
</html>

javascript

asked by anonymous 11.03.2015 / 21:59

3 answers

How to remove standard Google Maps v2 options Click in Jquery does not work

score 1 · Answer 1

You need to read about DRY , which is a rule / recommendation on the importance of not repeating code unnecessarily.

If you join this idea to the fact that if s without {} only apply to the immediately following line, then you can simplify your code to something like:

$(document).ready(function () {
    var paginas = {
        menuinicio: '#sect1',
        menuempresa: '#sect2',
        menuprodutos: '#sect3',
        menunoticias: '#sect4'
    }
    $(".active li").click(function (event) {
        $('[id^="sect"]').hide('slow');
        $(paginas[this.id] || '#sect5').show('slow');
    });
});

Notice that you have a syntax error in your HTML, where you have

<ul>
   <li class='active'>
   <li id="menuinicio"><a href='#'>Inicio</a></li>

This <li class='active'> should not have another li inside, but more serious is that it is not closed. That is, </li> is missing.

jsFiddle: link

score 0 · Answer 2

The error I saw there that you are using String.match as if comparison.

The% server% method to test whether the string matches the regular expression ( Documentation here )

So if you replace this line:

if(link.attr("id").match("menuinicio"))

by:

if( link.attr("id") === "menuinicio" )

It will probably work.

But I propose to use a different approach.

Use classes to control items that will be shown or hidden. Ex.:

HTML

<ul id="menu">
    <li data-target="#menuinicio"><a href='#'>Inicio</a></li>
    <li data-target="#menuempresa"><a href='#'>Empresa</a></li>
    <li data-target="#menuprodutos"><a href='#'>Produtos</a></li>
    <li data-target="#menunoticias"><a href='#'>Noticias</a></li>
    <li data-target="#menucontacto"><a href='#'>Contactos</a></li>
</ul>
...
<ul id="content-container">
    <li id="menuinicio" class="active"><a href='#'>Inicio</a></li>
    <li id="menuempresa"><a href='#'>Empresa</a></li>
    <li id="menuprodutos"><a href='#'>Produtos</a></li>
    <li id="menunoticias"><a href='#'>Noticias</a></li>
    <li id="menucontacto"><a href='#'>Contactos</a></li>
</ul>

JS

// Faz cache do elemento para não precisar transpor a  DOMTree mais que uma vez
var content_container = $('#content-container');

$('#menu').find('li').on('click', function(){
    var $this = $(this);
    content_container
        .find('active') // encontra a tab ativa atual
        .removeClass('active') // remove a classe 'active'
        .hide('slow'); // esconde ela
    content_container
        .find($this.data('target')) // encontra a tab em que o menu "aponta"
        .addClass('active') // torna ela a aba ativa
        .show('slow'); // mostra a tab
});

I tried to keep your logic, but I think you should show and hide your tabs by CSS. Something like:

#content-container > li {
    display: none;
}

#content-container > li.active {
    display: block;
}

And maybe use some CSS Animations to give more effect.

score 0 · Answer 3

Here is another variant for the future (IE9 +), only with CSS, without JavaScript.

Change the HTML to have in the href of each menu link the id of the div that you want to display. Then put them together in the CSS of these li a :

opacity: 0;
transition: opacity 1s;

and finally:

:target {
    opacity: 1 !important;
}

or to be more specific:

#sect1:target, #sect2:target, #sect3:target, #sect4:target, #sect5:target {
    opacity: 1 !important;
}