Bị double link khi add link cho thẻ a nằm trong thẻ li (ASP.NET)

#1

Mình có làm 1 danh sách như sau:

<ul class="LeftMenu">
    <li style="background-image:url(../Images/home.png)">
        <a href="~/Images/document.png"/>
    </li>
    <li style="background-image:url(../Images/app.png)">
        
    </li>
    <li style="background-image:url(../Images/driver.png)"/>
    <li style="background-image:url(../Images/template.png)"/>
    <li style="background-image:url(../Images/tutorial.png)"/>
    <li style="background-image:url(../Images/document.png)" />
    <li style="background-image:url(../Images/tool.png)" />
    <li style="background-image:url(../Images/install.png)"/>
</ul>

Trong đó li đầu tiên chứa 1 thẻ a có link. Còn các li khác thì không. Trên hình thì li “Home” có màu đỏ thể hiện khu vực của thẻ a.

Mặc dù các thẻ li bên dưới để trống và khu vực của thẻ a (li - Home) không tới khu vực đó nhưng toàn bộ các thẻ li bên dưới đều nhận link của thẻ a trong li đầu tiên.

Theo mình hiểu thì các li trống không hiện link khi di chuột vào chứ nhỉ ?
Nhờ các bạn giải thích giúp và chỉ giáo cách khắc phục. :slight_smile:

#2

Mình ko hiểu vì sao lại vậy nhưng có cách này bạn thử làm xem khắc phục được ko?
Đặt <li> trong thẻ <a> như trong ví dụ này xem sao:

1 Like
#3

Mình có gõ thử nhưng thẻ ul không chứa được thẻ a bạn ơi :slight_smile:

1 Like
#4

Vậy bạn thử thay link làm theo cách này xem sao:
<li onclick="location.href='http://example';"> ... </li>

#5

Cách này thì OK nhé nhưng nó có 1 vấn đề là di chuột qua li thì không hiện link.

Một vấn đề của mình khi chèn thêm các thẻ a trống vào các li bên dưới thì nó hiện ra 2 cái khu vực thẻ a luôn.

menu3.png354×734 75.1 KB

Mới vọc mà lắm vấn đề dữ :slight_smile:

#6

Trường hợp lỗi thì chỉ có thể là do diện tích các vùng chồng chéo lên nhau (xem inspect element để rõ), và bạn để thẻ li có background-image như vậy thì ko đúng lắm. Nếu muốn click vào ảnh hiện link thì bạn thay vì đặt ảnh trong style, bạn để vào 1 thẻ <img> đặt trong li là ok, ví dụ như thế này:
<li><a href="#">Backpack <img ... /></a></li>

1 Like
#7

Mình đã làm và có vẻ khả quan rồi. Cảm ơn bạn !

#8

OK.

Còn vụ này thì cứ từ từ “hưởng thụ” nhé, fix bugs chiếm 50% thời gian code của dev mà, làm project lớn thì 1 cái lỗi nhỏ nhỏ (thiếu “;” chẳng hạn) mất 1, 2 ngày để tìm ra là bình thường :smile:

#9

Mấy cái này nó không hiện lỗi như làm App mà sống chết mặc bây nên mệt dữ :smile:

#10

Nên bạn nên quen với việc đặt dubugger rồi xem trong inspect element/console để xem lỗi, hoặc dùng alert, console.log để in 1 số thông tin khi cần. Làm web hay so với app ở chỗ tự do, nhưng cũng hạn chế so với app ở cái chỗ quá tự do đó.

#11

Cái này mình từ từ tìm hiểu. Mới từ bên App sang nên chưa biết gì :slight_smile:

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?