製作一個列表項可點擊（HTML/CSS）

所以我試圖讓每個列表項目my site可點擊，但我不知道什麼是最好的方式來做到這一點。請幫助我。製作一個列表項可點擊（HTML/CSS）

所以這裏是有關HTML：

<ul> 
    <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/></a></li> 
    <!-- More List Items --> 
</ul>

這裏是相關的CSS：

.content ul li { 
    display:block; 
    list-style:none; 
    padding:5px 10px 5px 15px; 
} 

.content li li { 
    // This is for when there are sub-categories. 
    border-bottom: none; 
    border-top: 1px solid #f8d9d0; 
    margin: 3px -10px -3px -15px; 
    padding: 5px 0px 5px 30px; 
} 

.buy { 
    float: right; 
    margin-top: -2px; 
} 

// The next ones all deal with the shopping cart icon that appears only on hovers. 

.listblock ul li img { 
    visibility: hidden; 
} 

.listblock ul li:hover img { 
    visibility: visible; 
} 

.listblock ul li ul li img { 
    visibility: hidden !important; 
    margin-right: 10px; 
} 

.listblock ul li ul li:hover img { 
    visibility: visible !important; 
    margin-right: 10px; 
}

我怎樣才能使整個列表項點擊，仍然有購物車圖標和Google Analytics事件跟蹤仍然有效？有一些我可以使用的jQuery魔法嗎？

我試過使用顯示器：亞馬遜的鏈接塊，但似乎搞亂了圖像的位置。

太謝謝你了！

來源

2010-08-15 Daniel O' Connor

使用此jQuery的片斷http://stackoverflow.com/questions/ 1121748/how-to-html-link-activated-by-click-the-li/16847686＃16847686 – 2013-05-30 23:51:14

如何將所有內容放入鏈接？

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

看起來像是最自然的嘗試。

來源

2010-08-15 03:48:19

我想你可以使用下面的HTML和CSS組合來代替：

<li> 
    <a href="#">Backback</a> 
</li>

上懸停，然後使用CSS背景的籃子知名度：

.listblock ul li a { 
    padding: 5px 30px 5px 10px; 
    display: block; 
} 

.listblock ul li a:hover { 
    background: transparent url('../img/basket.png') no-repeat 3px 170px; 
}

Simples！

來源

2010-08-15 03:53:30

看起來像它會做的伎倆。你知道在Dreamweaver或Coda中是否有自動執行此操作的功能嗎？我有150多個列表項。如果你不確定，不要擔心。 – 2010-08-15 04:05:31

如果你有這麼多的項目，你應該真的使用像Ruby on Rails或Django那樣的一代服務器。 – Derek 2014-12-03 12:51:17

溝<a href="...">。將onclick（全部小寫）處理程序放在<li>標記本身上。

來源

2010-08-15 03:55:41

li元素支持onclick事件。

<ul> 
<li onclick="location.href = 'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css';">Make A List Item Clickable</li> 
</ul>

來源

2013-05-16 08:32:32 Alan

這裏是一個可行的解決方案 - http://jsfiddle.net/STTaf/

我用簡單的jQuery：

$(function() { 
    $('li').css('cursor', 'pointer') 

    .click(function() { 
     window.location = $('a', this).attr('href'); 
     return false; 
    }); 
});

來源

2013-08-06 01:47:18 webtech

我敢肯定，這是一個遲到的反應，但也許是對別人有用。你可以把你所有<li>元素含量爲<a>標籤，並添加以下的CSS：

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area/or other styling */ 
    padding: 5px 20px; 
}

來源

2013-08-31 11:47:45

純HTML/CSS

----------------- -------- HTML -----------------------

<div id="leftsideMenu"> 
       <ul class="vertical"> 
        <li><a href="#">India &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">USA &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Russia &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">China &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Afganistan &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Shrilanka &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Landon &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Scotland &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Ireland &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
       </ul> 
</div>

----------- ------------ CSS --------------------------

#leftsideMenu ul.vertical { 
     list-style-type: none; 
     width: 100%; 
     height: auto; 
     padding-left: 0; 
    } 

    #leftsideMenu ul li { 
     width: 100%; 
     border-bottom: 1px dashed #eee; 
     background-color: cadetblue; 
     color: white; 
    } 

     #leftsideMenu ul li a { 
      padding:8px 20px 8px 20px; 
      color: white; 
      display: block; 
     } 

      #leftsideMenu ul li a:hover { 
       background-color: #8BC34A; 
       color: white; 
       transition: 0.5s; 
       padding-left: 30px; 
       padding-right: 10px; 
      } 

      #leftsideMenu ul li a:focus { 
       background-color: #8BC34A; 
      }

來源

2016-10-01 09:21:12

關鍵是要給錨鏈接顯示「block」屬性和100％寬度屬性。

製作列表項點擊（例如）：

HTML：

<ul> 
    <li><a href="">link1</a></li> 
    <li><a href="">link2</a></li> 
    <li><a href="">link3</a></li> 
</ul>

CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
ul li a { 
    display: block; 
    width: 100%; 
    text-decoration: none; 
    padding: 5px; 
} 
ul li a:hover { 
    background-color: #ccc; 
}

來源

2017-12-23 18:37:53 joefly

製作一個列表項可點擊（HTML/CSS）

回答

相關問題