Una forma de mantener un enlace en negrita una vez seleccionado (no es lo mismo que un: visitado)

0

Estoy creando una página de 'Preguntas frecuentes' que tiene una lista de preguntas en la parte superior (enlaces) y las respuestas aparecen a continuación.

A medida que se hace clic en cada pregunta, se muestra la respuesta correspondiente (usando mostrar / ocultar divs). Mi pregunta es: ¿Hay alguna manera de hacer que la pregunta o el enlace en el que se haga clic estén en negrita? y que permanezca en negrita hasta que se haga clic en otra pregunta, en cuyo caso la pregunta en la que se hizo clic aparecerá en negrita y la pregunta en la que se hizo clic anteriormente volverá a la normalidad.

He intentado usar un: active en el CSS, pero aunque esto hace que el texto esté en negrita al hacer clic, tan pronto como sueltas el mouse, vuelve a la normalidad.

Este es mi CSS

    div#newboxes1, div#newboxes2, div#newboxes3
{
 border: 1px solid black;
 background-color: #CCCCCC;
 display: none;
 padding: 5px;
 width: 659px;
}

div#newboxes1 {
display:block;

}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
 border: none;
}

ol#toc li {
    float: left;
}

ol#toc li a img
{
 border: none;
}

ol#toc a {
    color: #676767;
    float: left;
    line-height: 2em;
    text-decoration: none;
}

ol#toc li.current {
    background-color: #e5e5e4;
    background-position: 0 -60px;
}

ol#toc li.current a {
    color: #676767;
}

ol#toc li.current a:hover {
    color: #fff;
    font-weight: bold;
}

div.content {
    background: #e6e5e4;
    padding: 20px;
 width: 669px;
 margin: 0px;
}

div.content a
{
 color: #000000;
 text-decoration: underline;
}

div.content a:active
{
 font-weight: bold;
}

div.content a:visited
{
 font-weight: bold;
}

Este es mi HTML

<ol id="toc"><li class="current"><a href="customer-service_delivery.html"><img src="delivery_0.jpg" alt="Delivery" /></a></li>
<li><a href="customer-service_returns.html"><img src="returns.jpg" /></a></li>
<li><a href="customer-service_contact.html"><img src="contact.jpg" /></a></li>
<li><a href="customer-service_shopping.html"><img src="shopping.jpg" /></a></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order?    </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
  <p>Where is my order answer</p>
  </div>
<div name="newboxes" id="newboxes2">
  <p>UK Standard Delivery answer</p>
  </div>

La función Javascript se llama cuando se hace clic en cada enlace, esto muestra / oculta los divs relevantes que están actualmente uno encima del otro.

javascript está debajo

function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("name");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }

}

Gracias por tu ayuda :) Theresa

2
  • 1
    has probado a: active? Patricia 8 de septiembre de 2010 a las 16:33
  • ¿Qué marco JS estás usando? vartec 8 de septiembre de 2010 a las 16:40
0

Tienes que agregar este estilo a tu archivo css:

ol#toc li.current a:active {
    font-weight: bold;
}
0

Sí, simplemente modifique su Javascript para agregar o eliminar una clase. Defina esa clase como con el peso del texto en negrita o normal.

0

El selector de CSS :activelo hará. Uso igual que con :hover.

-1

usando jquery, algo como esto puede funcionar. puede sustituir ".css" por ".addClass ('clase')" y ".removeClass ('clase')" en los lugares relevantes.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').css('font-weight','normal');                   
        $(this).css('font-weight','bold');
    });
});


// or:

$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').removeClass('active');             
        $(this).addClass('active')
    });
});

 </script>

debe tener en cuenta - donde "activo" es su clase css para diseñar el LI. y ol # foo es tu OL.