Show / Hide div by clicking on menu

Asked

Viewed 1,265 times

0

Good, I have a problem in the code, I intend to press a Menu button that hides all DIV except one, however it is not working, someone can 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

3 answers

1

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

If you add that idea to the fact that ifs without {} only if they apply line immediately after, then you can simplify your code for 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');
    });
});

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

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

whereas this <li class='active'> must not have another li inside, but more serious is that it is not closed. In other words, the </li>.

jsFiddle: http://jsfiddle.net/5paxq6at/show/

0

The mistake I saw there that you’re using String.match as a comparison if.

The method String.match(RegEx) server to test if the string matches the regular expression (Documentation here)

So if you replace this line:

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

for:

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

It’ll probably work out.

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.

0

Here’s another variant for the future (IE9+), only with CSS, no Javascript.

Sets the HTML to have in href of each link in the id of div that you want to show. Then put together in the CSS of those 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;
}

jsFiddle: http://jsfiddle.net/s24dpzrx/show/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.