How to Make The HTML Link Activated by Clicking on The <Li>

How to make the HTML link activated by clicking on the li?

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

It may need some tweaking for IE6, but that's about how you do it.

How to make a valid li link

This format is invalid

<a href="index.html"><li class="invalid nav-item">invalid</li></a>

Valid format is

 <li class="invalid nav-item"><a href="index.html">valid</a></li>

As for your concern anchor filling up the space of li, little css trick will solve it.

a {
 text-decoration: none;
 display: block;
 width: 100%;
 height: 100%;
}

Make a link clickable through the whole li

You may try this (Example)

#mainNav ul li a {
    display:inline-block;
    width:100%;
}

Add a div when click on a li or link

Just delegate

$('.main').on('click','.title:last', function(e) {

and

$('#data').on('click', '.title', function(e) {
  const hasMore = $(this).closest(".data").next().length;
  if (hasMore>0) $(this).closest(".data").siblings().remove(); // this should have worked
})

$(function() {
  $('.main').on('click', '.title:last', function(e) {
    const $new = $(this).closest('.data').clone();
    $('.details p',$new).text('Tusher '+$('.main .data').length)
    $('.main').append($new)
    
  });

  $('.main').on('click', '.title', function(e) {
    const hasMore = $(this).closest('.data').nextAll().length
    if (hasMore > 1) {
      $(this).closest(".data").siblings().remove(); 
    }
  })
});

ul {
  padding: 0px;
}

.data {
  border: 1px solid;
  margin: 5px;
  float: left;
  width: 13%;
}

.data a {
  text-decoration: none;
}

.data ul {
  list-style-type: none;
}

.profile {
  height: 40px;
  width: 40px;
  float: left;
  margin: 0px 13px;
}

.details {
  font-size: 13px;
}

li.title {
  border-bottom: 2px solid #ddd;
  overflow: hidden;
  margin-bottom: 5px;
  padding: 5px 0;
}

.active {
  background: #ececec;
}

p {
  margin: 0px;
  padding: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="data">
    <ul>
      <li class="title">
        <a href="#">
          <img src="img/1.jpg" class="profile" alt="Sample Image">
          <div class="details">
            <p>Tusher</p>
            <p>Designation</p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

Links within and outside List elements not working

The link needs to be inside the <li>, for a start, as a <li> is a block-level element whereas an <a> is inline.

Also, setting :hover on elements other than <a> - while supported in the likes of FF, etc - is in my experience a bit spotty at working right and doesn't work at all in older IEs.

Personally, if it were me writing the HTML, it would look something like this:

<ul id="menu">
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2"><a href="2">Two</a></li>
    <li id="menu-3"><a href="3">Three</a></li>
    <li id="menu-4"><a href="4">Four</a></li>
    <li id="menu-5"><a href="5">Five</a></li>
    <li id="menu-6"><a href="6">Six</a></li>
</ul>

And the CSS would be something like the following:

#menu{
    width:107px;
 height:200px;
}
#menu li{
    padding: 0, 0, 5px;
}
#menu li a{
    display: block;
    text-indent: -999px;
    height: 29px;
    background: transparent, none, center, center, no-repeat;
}

#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); }
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); }

/** Continue on with your other links here... **/

Make an entire li element clickable, but don't trigger the link when clicking inside links

You may also be interested in event.stopPropagation(). Which will allow you to prevent the event from bubbling up (aka notifying the li of the click).

$('ul > li').click(function(e) {
    // Go to link.com
}).children('a').click(function(e) {
    e.stopPropagation();
    // Go to something.com
});

​http://jsfiddle.net/erF3S/

---

Related Topics