js和data-url代替a標簽


看到這樣一段代碼

<ul id="sidebar-menu" class="bm-menu">
                        <li class="bm-menu-item" data-id="2">
                            <a class="bm-menu-title" data-url="pages/form.html">
                                <i class="bm-menu__icon iconfont icon-doc"></i>
                                <span class="bm-menu__label">表單</span>
                            </a>
                        </li>
                        <li class="bm-menu-item" data-id="3">
                            <a class="bm-menu-title" data-url="pages/404.html">
                                <i class="bm-menu__icon iconfont icon-doc"></i>
                                <span class="bm-menu__label">404</span>
                            </a>
                        </li>
</ul>

跳轉沒用a標簽,而是用了div加h5的自定義屬性,因為a標簽有種種不確定性,比如在各種瀏覽器的表現形式不統一,而且鼠標hover的時候頁面下方會有鏈接,顯得很low。而div+自定義屬性,在js中獲取鏈接,通過$('.new').attr('url')獲取地址,然后把鏈接 window.href。
當然,data屬性可以使用dataset拿到,是一個對象。但使用dataset操作data 要比使用getAttribute和setAttribute速度稍微慢些,使用dataset不能提高代碼的性能,但是對於簡潔代碼,提高代碼的可讀性和可維護性是很有幫助的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM