How to make the href that works inside my div with focus?

Question

How to make the href that works inside my div with focus?

Navigation

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

5

I have a list that when I click on an item it receives a focus and a div with information appears. One of this information has a link but when I click on it, my div closes and does not open the page.

Follow the code ...

Full HTML:

<html>
    <head>
        <style>
            li .faq-content-answer{
                display: none;
                padding: 0px;
            }
            li:focus .faq-content-answer{
                display: block;
            }
            .faq-content-answer p{
                display: none;
            }
            li:focus .faq-content-answer p{
                display: block;
                padding: 18px 0 20px 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li tabindex="0">Como me cadastrar?
                <div class="faq-content-answer"><p>Para se cadastrar, <a target="_blank" href="link-clicavel">Clique aqui</a>
                Nós enviaremos um e-mail com as suas informações e se elas estiverem corretas, é só confirmar a aproveitar!</p>
                </div>
            </li>
        </ul>
    <body>
</html>

How can I make href work when I click?

html css css3

asked by anonymous 10.06.2016 / 20:38

2 answers

0

Would it be something like this? Using the jQuery library.

$('#div-clicavel').on('click', function() {
  window.location.href = "https://www.google.com/";
});

<div id="div-clicavel">Clique Aqui</div>

10.06.2016 / 21:05

Questions to implement a webservice Progress bar for DOWNLOAD files in Jquery

score 1 · Accepted Answer

See if that's the boss:

li{
display:inline:block;
}
.faq-content-answer {
    display: none;
    position: absolute;
    
}


.faq-content-answer a {
   
    display: block;
}


.faq-content-answer a:hover {background-color: #f1f1f1}


li:hover .faq-content-answer {
    display: block;
}

    <body>
        <ul>
            <li >Como me cadastrar?
                <div class="faq-content-answer"><p>Para se cadastrar, <a target="_blank" href="link-clicavel">Clique aqui</a>
                Nós enviaremos um e-mail com as suas informações e se elas estiverem corretas, é só confirmar a aproveitar!</p>
                </div>
            </li>
        </ul>
    <body>

If you like it, GL;)!