堆棧內存溢出
  簡體   English   中英

如何使整個“ li”區域和文本成為可單擊的鏈接

[英]How To Make Entire 'li' Area and Text A Clickable Link

 原文  2015-04-20 19:05:36  5   4    javascript/ jquery/ html/ css

問題描述

我正在嘗試使整個li標簽區域可點擊以及已經使我可點擊的文本。 我嘗試給它提供href屬性，但這不起作用。 我已經將li背景設置為在懸停時可以更改顏色，但是正如我所說的，如何使整個區域都可單擊？ 提前致謝。

HTML： 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
                </form>
            </div>
            <ul>


<li style="background-color: #333">
                    <a href="1Index.html" class="link">
                        Home
                    </a>
                </li>
                <li>
                    <a href="2Catgeories.html" class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                    <h1>LAKESIDE BOOKS</h1>
                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>

    <div id="sectiontwo">
        <div id="containertwo">
            <h2 id="sectwohead">Best Selling Books Right Now</h2>
                <div id="bestsellerimages">
                    <figure>
                        <img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
                        <figcaption>The Girl On The Train <br>
                            <span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
                    </figure>
                    <figure>
                        <img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
                        <figcaption>Meet Me In Manhattan <br>
                            <span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
                    </figure>
                    <figure>
                        <img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
                        <figcaption>The Pointless Book 2 <br>
                            <span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
                    </figure>
                </div>
        </div>
    </div>

</div>
</body>
</html>

CSS： 

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}

a:link, a:visited, a:hover, a:active{
    color: #DADADA;
    text-decoration: none;
}



#welcometext {
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar .searchstyle{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#searchbar input {
    max-width: 95%;
}
#sectionone {
    /*position: fixed;*/
    top: 0;
    right: 0;
    width: 80%;
}
#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
    margin: 6em 0 6em 0;
}
#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 13px;
}
#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}
#sectiontwo {
    width: 80%;
    top: 0;
    right: 0;
}
#containertwo {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #888888;
}
#sectwohead{
    margin: 2em 0 2em 0;
    color: #888888;
}
#bestsellerimages{
    float: left;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2em 0;
}
#bestsellerimages img{
    padding: 0;
}
#bestsellerimages figure{
    display: inline-block;
    width: 131px;
}
#bestsellerimages figcaption{
    font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
    margin: 0 0 0.5em 0;
}

這將有助於更清楚地看到我正在試圖做的，你可以在此圖像中看到- http://i.imgur.com/OZIt9TM.png -唯一可點擊區域是鉻合金中的藍色部分檢查，很容易看到。 因此，我想做的是使該特定“家庭李”的整個區域都可點擊。

4 個解決方案

解決方案1
 5 已采納  2015-04-20 19:09:12

基於列表的菜單的規則＃1：設計鏈接的樣式，而不是包裝器的樣式。 僅設置列表樣式（顯示/浮動等）。

在您的A標簽上使用display:block ，然后將所有樣式（而不是列表本身）放在該標簽上。

家

將background-color: #333移至CSS中的.link類，然后將display:block添加到該聲明中。

解決方案2
 0  2015-04-20 19:12:25

Ups對不起...嘗試這個.. 

#nav li {
   list-style-type: none;
  /* margin: 0; */
  /* padding: 0.75em 0 0.75em 0; */
  /* text-align: center; */
  /* max-width: 100%; */
  /* display: block; */
}

#nav li a {
  display: block;
  padding: 0.5em 0;

  margin: 0;
  padding: 0.75em 0 0.75em 0;
  text-align: center;
  max-width: 100%;

}

解決方案3
 0  2015-04-20 19:18:55

如果您使用的是jQuery（假設標簽正確），則可以這樣進行操作，而無需設置錨標簽的樣式： 

$('ul li').click(function() {
   location.href = $(this).find('a').prop('href'); 
});

我會建議ul列表的類名，例如<ul class="navigation"> 

$('ul.navigation li').click(function() {
       location.href = $(this).find('a').prop('href'); 
});

解決方案4
 -1  2015-04-20 19:22:37

將A標簽包裹在LI標簽周圍。 例如，查看google鏈接。 您將A標記僅放在文本周圍，而不是整個元素周圍。 

 <ol> <a href="http://google.com"> <li>google</li> <!-- DO THIS --> </a> <li> <a href="http://yahoo.com">yahoo</a> <!-- YOUR CURRENTLY DOING THIS --> </li> </ol>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使整個區域 <box> 在XUL可點擊嗎？ 如何使整個 div 可點擊（進入鏈接）？ 兌換 <li> 文字變成可點擊的鏈接 使整個<li>元素可單擊，但在單擊內部鏈接時不要觸發鏈接 如何使整個Gridview行可單擊並打開新鏈接？ 如何使空白區域可單擊以顯示文本？ 如何使圖像區域可點擊 使整個div（包括文本）可點擊 如何在SVG按鈕/鏈接上映射可點擊區域？ 如何根據文本區域中的文本使鏈接可點擊或不可點擊？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM