0

Amigos buenas tardes, estoy tratando de hacer que un panel me redireccione a una página, el problema es como hago que todo el panel se active cuando se paso el mouse y al hacer clic me redireccione a una página.

Como si fuera un boton, al pasar el mouse se active con un color más suave y al dar clic lleve a una página en específico llevando los valores de ese panel "nro de habitación".

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

    <title>Paneles</title>
  </head>
  <body>
  <div class="container">
            <div class="row">
  <div class="col-lg-3 col-md-4 col-sm-4 col-12" style="padding-bottom: 10px;">
                    <div class="card" style="background-color: #218838;">
                        <div class="row">
                            <div class="col-6">
                                <h3 class="text-center font_color">108</h3>
                                <h6 class="text-center font_color">Triple</h6>
                            </div>
                            <div class="col-6">
                                <i class="fa fa-bed font_color" aria-hidden="true" style="font-size: 4em; "></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                                                <strong><center>Libre</center></strong>
                                                            </div>
                        </div>
                    </div>
                </div>
                
    <div class="col-lg-3 col-md-4 col-sm-4 col-12" style="padding-bottom: 10px;">
                    <div class="card" style="background-color: #c82333;">
                        <div class="row">
                            <div class="col-6">
                                <h3 class="text-center font_color">103</h3>
                                <h6 class="text-center font_color">Doble</h6>
                            </div>
                            <div class="col-6">
                                <i class="fa fa-bed font_color" aria-hidden="true" style="font-size: 4em; "></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                                                <strong><center>Ocupado</center></strong>
                                                            </div>
                        </div>
                    </div>
                </div>
                 </div>
                </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

No hay problema si se hace con javascript o jquery lo importante es que se pueda convertir en un link.

Gracias por su apoyo!

1 respuesta 1

3

Podrias utilizar la etiqueta <a> de siempre, utilizando un div, section o cualquier contenedor que quieras y simplemente darle un poco de css cuando ocurra un hover (Mouse sobre el panel) de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        section {
            background: #F60;
            color: #FFF;
            width: 400px;
            height: 200px;
        }
        section:hover {
            background: #CCC;
        }
        .transicion {
            transition: all ease-in-out 1s;
        }
    </style>
</head>
<body>
    <a href="https://www.google.com">
        <section class='transicion'>
            <span>Aqui mi contenido</span>
        </section>
    </a>
</body>
</html>

Y con JQuery seria algo asi:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css" media="screen">
        section {
            background: #F60;
            color: #FFF;
            width: 400px;
            height: 200px;
        }
        section:hover {
            background: #CCC;
        }
        .transicion {
            transition: all ease-in-out 1s;
        }
    </style>
</head>
<body>
    <section id='myContent'>
        <span>mi Contenido</span>
    </section>

    <script>
        $('#myContent').click(function(e){
            window.location.href = 'https://www.google.com';
        });
    </script>
</body>
</html>

Ahora bien veo que tambien necesitas obtener el número de habitación, ésto podrias hacerlo con unas ligeras modificaciones, utilizaré el ejemplo de click que te mostré anteriormente:

$('.card').click(function(e){ // El click se verifica por la clase para que funcione en todos tus paneles
    var habitacion = $(this).find('h3').text(); // En este caso vi que el numero de habitacion estaba en un h3 es por eso que hago referencia a éste
    alert('Esta es la habitacion: ' + habitacion);
    // window.location.href = 'https://www.google.com';
    // Aqui redireccionas ya sea con metodo POST, GET o cualquier forma que utilices
});

Asi obtienes el número de habitación y bueno podrias combinar la redireccion con la forma de obtener la habitación según como quieres enviar el datos.

Te dejo tu código modificado:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

    <title>Paneles</title>
  </head>
  <body>
  <div class="container">
            <div class="row">
  <div class="col-lg-3 col-md-4 col-sm-4 col-12" style="padding-bottom: 10px;">

                    <div class="card" style="background-color: #218838;">
                        <div class="row">
                            <div class="col-6">
                                <h3 class="text-center font_color">108</h3>
                                <h6 class="text-center font_color">Triple</h6>
                            </div>
                            <div class="col-6">
                                <i class="fa fa-bed font_color" aria-hidden="true" style="font-size: 4em; "></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                                                <strong><center>Libre</center></strong>
                                                            </div>
                        </div>
                    </div>

                </div>

    <div class="col-lg-3 col-md-4 col-sm-4 col-12" style="padding-bottom: 10px;">
                    <div class="card" style="background-color: #c82333;">
                        <div class="row">
                            <div class="col-6">
                                <h3 class="text-center font_color">103</h3>
                                <h6 class="text-center font_color">Doble</h6>
                            </div>
                            <div class="col-6">
                                <i class="fa fa-bed font_color" aria-hidden="true" style="font-size: 4em; "></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                                                <strong><center>Ocupado</center></strong>
                                                            </div>
                        </div>
                    </div>
                </div>
                 </div>
                </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
    $('.card').click(function(e){
        var habitacion = $(this).find('h3').text(); // En este caso vi que el numero de habitacion estaba en un h3 es por eso que hago referencia a éste
        alert('Esta es la habitacion: ' + habitacion);
        // window.location.href = 'https://www.google.com';
    });
    </script>
  </body>
</html>

Espero te sirva. Saludos ;)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.