避免使用超级链接而采用前端data-url

data-* 相当于数据存储,点加了点击方法,就会读取里面的数据,进行页面跳转

<div class="level02_guide">

                    <ul class="title">
                        <li><span<#if type=='companyNotice'>
                                class="l02_active" </#if>
                                data-url="${webHomeUrl}/article/companyNotice/index"
                                data-type="/article/companyNotice/index">公司公告</span></li>
                        <li><span<#if type=='news'> class="l02_active" </#if>
                                data-url="${webHomeUrl}/article/news/index"
                                data-type="http://www.chinaobd2.com/wholesale/best-quality-vas-5054a-3560.html">VAS 5054A</span></li>
                    </ul>
                    <script type="text/javascript">
                        $(function() {
                            $('.level02_guide>ul>li>span')
                                    .on(
                                            'click',
                                            function() {
                                                var newsurl = $(this).attr(
                                                        "data-url");
                                                var newType = $(this).attr(
                                                        "data-type");
                                                var oldUrl = location.href;
                                                if (oldUrl.toLowerCase()
                                                        .indexOf(newType) < 0) {
                                                    location.href = newsurl;
                                                }
                                            });
                        });
                    </script>

<div>

这里我们对VAS 5054A采用data-url属性可以避免搜索引擎爬取我们不想传递权重的链接,是非常不错的前端设计。

猜你喜欢

转载自www.cnblogs.com/aid12580/p/10527817.html