01/10/2018, 09:12

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

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.

Chien Dang viết 11:14 ngày 01/10/2018

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:

chiendangmr.blogspot.com

HTML - Make entire div clickable

Blog about tricks in programming.

Văn Dương viết 11:21 ngày 01/10/2018

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

Chien Dang viết 11:16 ngày 01/10/2018

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

Văn Dương viết 11:25 ngày 01/10/2018

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.


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

Chien Dang viết 11:12 ngày 01/10/2018

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>

Văn Dương viết 11:25 ngày 01/10/2018

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

Chien Dang viết 11:17 ngày 01/10/2018

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

OK.

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

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

Văn Dương viết 11:17 ngày 01/10/2018

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ữ

Chien Dang viết 11:13 ngày 01/10/2018

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 đó.

Văn Dương viết 11:27 ngày 01/10/2018

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ì

Bài liên quan
0