1

Estoy muy confundida con las etiquetas "a" (hipervínculos dentro de otros).

Lo que quiero intentar es que el card sea un enlace contenedor, pero que también, cuando hagan clic en el usuario, los redirija al usuario y no al post.

cuando coloco un <a></a> dentro de otro, se cierra con el primero que encuentra. ¿Es posible hacer <a id="contenedor">....<a id="hijo">...</a>...</a>?

Intenté hacerlo con javascript, pero me toma todo el div y no me deja hacer clic en los enlaces internos.

.img-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card .ftr div {
    display: inline-block;
}

.card .ftr .stats {
    float: right;
    line-height: 30px;
}

.card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}

.table {
    margin-bottom: 0px;
}

.card .table {
    padding: 15px 30px;
}

.card .table-info {
    background: linear-gradient(60deg, #26c6da, #0097a7);
}

.card .table-success {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
}

.card .table-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
}

.card [class*="table-"] {
    color: #FFFFFF;
    border-radius: 6px;
}

.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
    color: #FFFFFF;
}

.card [class*="table-"] .icon i {
    border-color: rgba(255, 255, 255, 0.25);
}

.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
    color: rgba(255, 255, 255, 0.8);
}

.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
    color: #FFFFFF;
}

.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
    color: rgba(255, 255, 255, 0.8);
}

.card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <article class="col-md-12">
        <div class="cards-1 section-gray">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="table table-success">
                                <h5 class="category-social">
                                    <i class="fa fa-facebook"></i> Facebook
                                </h5>
                                <h4 class="card-caption">
                                    <a href="#">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                                        doloremque, quae saepe, nisi, illo at maxime"</a>
                                </h4>
                                <div class="ftr">
                                    <div class="author">
                                        <a href="#"> <img src="http://adamthemes.com/demo/code/cards/images/avatar3.png"
                                                alt="" class="avatar img-raised"> <span>Vilot Cabel</span> </a>
                                    </div>
                                    <div class="stats"> <i class="fa fa-heart"></i> 678 &nbsp; <i
                                            class="fa fa-share-alt"></i> 56 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</body>

</html>

Cuando intenté colocar una etiqueta "a" dentro de otra, sucedió lo siguiente.

.img-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card .ftr div {
    display: inline-block;
}

.card .ftr .stats {
    float: right;
    line-height: 30px;
}

.card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}

.table {
    margin-bottom: 0px;
}

.card .table {
    padding: 15px 30px;
}

.card .table-info {
    background: linear-gradient(60deg, #26c6da, #0097a7);
}

.card .table-success {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
}

.card .table-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
}

.card [class*="table-"] {
    color: #FFFFFF;
    border-radius: 6px;
}

.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
    color: #FFFFFF;
}

.card [class*="table-"] .icon i {
    border-color: rgba(255, 255, 255, 0.25);
}

.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
    color: rgba(255, 255, 255, 0.8);
}

.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
    color: #FFFFFF;
}

.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
    color: rgba(255, 255, 255, 0.8);
}

.card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <article class="col-md-12">
        <div class="cards-1 section-gray">
            <div class="container">
                <div class="row">
                    
                    <div class="col-md-4">
                        <a class="card" href="#">
                            <div class="table table-success">
                                <h5 class="category-social">
                                    <i class="fa fa-facebook"></i> Facebook
                                </h5>
                                <h4 class="card-caption">
                                    <a href="#">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                                        doloremque, quae saepe, nisi, illo at maxime"</a>
                                </h4>
                                <div class="ftr">
                                    <div class="author">
                                        <a href="#"> <img src="http://adamthemes.com/demo/code/cards/images/avatar3.png"
                                                alt="" class="avatar img-raised"> <span>Vilot Cabel</span> </a>
                                    </div>
                                    <div class="stats"> <i class="fa fa-heart"></i> 678 &nbsp; <i
                                            class="fa fa-share-alt"></i> 56 </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                </div>
            </div>
        </div>
    </article>
</body>

</html>

6
  • Que la tarjeta tenga un enlace también?
    – BetaM
    el 21 jun. 2020 a las 5:09
  • si, lo quiero hacer como el segundo ejemplo, pero se desarma el html, osea quiero que el card sea un enlace, pero que se pueda hacer click tambien en el link del usuario. el 21 jun. 2020 a las 5:17
  • Ok un momento ..
    – BetaM
    el 21 jun. 2020 a las 5:25
  • Lo intente con jquery, pero solo me toma el href del card, los que estan dentro no, osea siempre direccionan al enlace del card, jsfiddle.net/6z1gacup el 21 jun. 2020 a las 5:36
  • Respuesta corta: No puedes tener enlaces anidados. Aunque por medio de javascript puedes asignar evento click a la tarjeta y conservar los enlaces internos.
    – Triby
    el 21 jun. 2020 a las 6:11

2 respuestas 2

0

Lo primero es cambiar la etiqueta del enlace por un div y colocar la dirección en un atributo dataset:

De esto: <a class="card" href="https://www.google.com/">
A esto: <div class="card" data-href="https://www.google.com/">

Después, con Javascript, cargas todas las tarjetas y analizas las que tengan el atributo para asignar evento al hacer clic.

Puedes hacer que el cursor se muestre igual que en los enlaces, lo malo es que no se verá la dirección a donde te va a llevar.

// Obtener todas las tarjetas
let cards = document.querySelectorAll('.card');
// Recorrer tarjetas
cards.forEach(card => {
    // La tarjeta tiene atributo data-href?
    if(card.dataset.href) {
        // Asignar estilo del cursor
        card.style.cursor = 'pointer';
        // Asignar evento click
        card.addEventListener('click', (e) => {
            // Solo si el clic no fue en un enlace hijo
            if(e.target.tagName != 'A') {
                // Ir al enlace
                window.location.href = card.dataset.href;
            }
        });
    }
});
.img-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card .ftr div {
    display: inline-block;
}

.card .ftr .stats {
    float: right;
    line-height: 30px;
}

.card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}

.table {
    margin-bottom: 0px;
}

.card .table {
    padding: 15px 30px;
}

.card .table-info {
    background: linear-gradient(60deg, #26c6da, #0097a7);
}

.card .table-success {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
}

.card .table-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
}

.card [class*="table-"] {
    color: #FFFFFF;
    border-radius: 6px;
}

.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
    color: #FFFFFF;
}

.card [class*="table-"] .icon i {
    border-color: rgba(255, 255, 255, 0.25);
}

.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
    color: rgba(255, 255, 255, 0.8);
}

.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
    color: #FFFFFF;
}

.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
    color: rgba(255, 255, 255, 0.8);
}

.card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <article class="col-md-12">
        <div class="cards-1 section-gray">
            <div class="container">
                <div class="row">
                    
                    <div class="col-md-4">
                        <div class="card" data-href="https://www.google.com/">
                            <div class="table table-success">
                                <h5 class="category-social">
                                    <i class="fa fa-facebook"></i> Facebook
                                </h5>
                                <h4 class="card-caption">
                                    <a href="#">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                                        doloremque, quae saepe, nisi, illo at maxime"</a>
                                </h4>
                                <div class="ftr">
                                    <div class="author">
                                        <a href="#"> <img src="http://adamthemes.com/demo/code/cards/images/avatar3.png"
                                                alt="" class="avatar img-raised"> <span>Vilot Cabel</span> </a>
                                    </div>
                                    <div class="stats"> <i class="fa fa-heart"></i> 678 &nbsp; <i
                                            class="fa fa-share-alt"></i> 56 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </article>
</body>

</html>

Otra posible solución sería jugar con posiciones absolutas / relativas, pero creo que complicaría un poco el diseño responsivo. Esperemos a ver si alguien con mayor experiencia con Bootstrap puede colaborar con una propuesta.

5
  • Hola! si, asi lo habia intentado similar con jquery, pero cuando hago click en los enlaces internos me lleva al del 'dataset', aqui lo puedes ver jsfiddle.net/6z1gacup, siempre direcciona al del card, tal vez con posiciones absolutas y relativas podria ser el 21 jun. 2020 a las 6:37
  • Este ejemplo, con javascript puro, sí funciona. Probablemente lo que intentaste con jQuery no incluía ver dónde se hizo el clic. Edito: Efectivamente, solo faltaba esa verificación. ¿Quieres que actualice mi respuesta con jQuery?
    – Triby
    el 21 jun. 2020 a las 6:38
  • Es verdad!!! gracias! ahi lo probe en mi proyecto, y funciona!! estuve toda la tarde investigando, porque se me desarmaba el diseño, pero es tal cual dices, no se pueden anidar enlaces, gracias de nuevo! por la respuesta tan pronta! voy a dormir tranquila! el 21 jun. 2020 a las 6:46
  • Si te sirvió, no olvides marcar la respuesta como aceptada. Gracias.
    – Triby
    el 21 jun. 2020 a las 6:47
  • si deseas puedes ampliar la respuesta con el ejemplo tambien de jquery! mil gracias triby!! el 21 jun. 2020 a las 6:49
0
<a onclick="urlConsulta(tuRuta)">ancla</a>

    urlConsulta(url){
        event.preventDefault();
        window.open(url, '_blank');
    },
1
  • colocale al ancla un onclick con esa funcion, a mi me funciono.
    – user209688
    el 19 ene. 2021 a las 17:29

Tu Respuesta

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

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