keep selected HTML list item by clicking anywhere on the page

Question

keep selected HTML list item by clicking anywhere on the page

Navigation

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

0

I am working with html and js, I have a series of icons as items in an HTML list that are part of a form, which if an icon is selected, the icon background changes to distinguish that icon is selected, and I get the name of the icon class in a textbox or input to save it in a BD along with the other data, I have a problem that when I select the icon the background changes color but when I click on any part of the page it is erased the background and it is as if I had not selected anything, it happens as if the focus changes, Someone knows how can I correct that problem ?, I do not know if it is the css or the js my code is below the image

JS

  $(document).ready(function () { 
       var iconos = document.querySelectorAll('.fa');
            //El Input a dondese enviará el valor de la clase
            var input = document.getElementById('<%=txtIcono.ClientID%>');
                //alert(input);
            //Iteramos sobre los iconos para agregar el Listener
            for (var i = 0; i < iconos.length; i++) {
                //agregamos el Listener para el evento click
                iconos[i].addEventListener('click', function () {
                    // asignamos al input el valor de la clase.
                    input.value = this.className;

                });
            }
    });

CSS

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}

HTML List

<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
                                    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
                                </ul>

javascript jquery html css

asked by Ivxn 07.12.2017 в 23:14

source

2 answers

1

I do not understand much your code, it seems that you are mixing it with java and that you use jquery but at the same time no, this is a simpler way to do it:

$('.fa').on("click",function(){
  $this.css("background-color","blue");
})

This way you avoid knowing the id and all that and if you want to deselect it by giving it another click, only valid for the color.

answered by 08.12.2017 в 00:44

Duplicate records mysql How to have a sentence repeated until it is correct

score 1 · Accepted Answer

That's because the style you set about the element that has the focus:

.enlace > a:focus .fa {
  cursor: pointer;
  background-color: gold;
  border-radius: 50%;
}

You should use some class to identify the active button, regardless of whether it has the focus or not. Something like this:

.fa.seleccionado {
  cursor: pointer;
  background-color: gold;
  border-radius: 50%;
}

Then in the click event, apart from filling in the txtIcono element, you should remove the class seleccionado of the element that had it and add it to the element that has been clicked on.

Also, since you have jQuery, why do not you use it to manipulate the DOM? That is precisely his strength:

$(document).ready(function () { 
  var $iconos = $('.fa');
  $iconos.click(function(){
    $iconos.removeClass('seleccionado');
    $('#txtIcono').val($(this).attr('class'));
    $(this).addClass('seleccionado');
  });
  $('#seleccionar').click(function(){
    var clase = $('#txtIcono').val().trim();
    if (clase){
      var icono = $('.' + clase.replace(' ', '.'));
      if (icono && icono.length){
        $iconos.removeClass('seleccionado');
        icono.addClass('seleccionado');
      }
    }
  });
});

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.fa.seleccionado {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}
.toolbar{
  background-color: #333333;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar">
  <ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
  </ul>
</div>
<input type="text" id="txtIcono" />
<button id="seleccionar">Seleccionar</button>