Mostrar y ocultar elementos

elviingoomez · #1 (**permalink**) 13/02/2015, 14:15

Tengo este codigo en donde hay un menu que muestra contenido mediante iframes, he logrado que mustre los iframes segun presione el menu, pero tengo un que cuando muestra un contenido de un submenu especifico no lo muestra, quisiera que cuando muestra un iframe oculte el otro pero no se como hacerlo, si alguien sabe la manera de hacer se les agradece que me ayuden.

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="description" content="pagina principal de la app">
        <meta name="author" content="#">
        <link rel="shortcut icon" href="http://pagina.ejemplo/favicon.png">
        <link rel="stylesheet" href="css/base.css" type="text/css">
    <link rel="stylesheet" href="css/hmbrgr.min.css" type="text/css">
    <script type="text/javascript">
    function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
   } else {
      elElemento.style.display = 'block';
   }
}
    </script>
  </head>
                <title>pagina</title>

        <style type="text/css">


/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    z-index: 100;
}
#loader {
    width: 100px;
    height: 100px;
    position: absolute;
    left:50%; top:50%;
    background: url(http://pagina.ejemplo/img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}
</style>
        <!-- Bootstrap theme -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="http://www.pagina.ejemplo/media/menu.css" rel="stylesheet">
        <link href="css/theme.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="css/base.css" type="text/css">
    </head>
    <style>
    #iframe{position:absolute;left:0px;top:0px;}
    </style>
    <body style="overflow-y:hidden">
        
       <div id="preloader">
       <div id="loader">&nbsp;</div>
       </div>
    <div id="main">
        <div id="js-menu" class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <div class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
            <a href="#" class="hmbrgr one"></a>
          </div>
           <input class="buttomback" type="button" onclick="history.back()" value="<">
           <span  class="logomenu">
                <div align="center">
                  <img src="http://www.pagina.ejemplo/media/logowhite.png">
                </div>
            </span>
           
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li> <a class="text-menu" href="javascript:void(0);" onclick="SINO('ifrm-inicio')">Inicio</a></li>
                        <li> <a class="text-menu" href="javascript:void(0);" onclick="SINO('ifrm-ofertas')">Ofertas</a></li>
                        <li> <a class="text-menu" href="javascript:void(0);" onclick="SINO('ifrm-tiendas')">Tiendas</a></li>
                        <li> <a class="text-menu" href="javascript:void(0);" onclick="SINO('ifrm-hoteles')">Hoteles</a></li>
                    </ul>
                </div>
            </div>
        </div>



        <div id="ifrm-inicio" style="display:none;">
            <iframe id="iframe1" name="iframe1" frameborder="0" width="100%" height="100%" src="http://www.pagina.ejemplo/incio"></iframe>
        </div>

        <div id="ifrm-ofertas" style="display:none;">
            <iframe id="iframe2" name="iframe2" frameborder="0" width="100%" height="100%" src="http://www.pagina.ejemplo/ofertas"></iframe>
        </div>

        <div id="ifrm-tiendas" style="display:none;">
            <iframe id="iframe3" name="iframe3" frameborder="0" width="100%" height="100%" src="http://www.pagina.ejemplo/tiendas"></iframe>
        </div>

        <div id="ifrm-hoteles" style="display:none;">
            <iframe id="iframe4" name="iframe4" frameborder="0" width="100%" height="100%" src="http://www.pagina.ejemplo/hoteles"></iframe>
        </div>
        

<script type=”text/javascript”>
function redireccionar() {
alert(‘Requiere acceso a internet’);
history.back(1);
}
</script>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/index.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#preloader').fadeOut('slow');
    $('body').css({'overflow':'visible'});
})
</script>
<script src="js/jquery.hmbrgr.js"></script>
    <script>
      $('.hmbrgr.one').hmbrgr();
    </script>
    </body>
</html>