前端使用li布局跳转链接

最新推荐文章于 2023-06-25 14:19:06 发布

weixin_40689822

最新推荐文章于 2023-06-25 14:19:06 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/weixin_40689822/article/details/118992408

版权

方法一
1.设置css

 <style type="text/css">
        .skip ul li{
            float: left;
            font-size: 15px;
            width: 110px;
            border: 0px solid red;
            list-style: none;
            cursor:pointer;
        }
    </style>

2.在body布局

 <div class="row skip">
                <ul>
                    <li class="jumpConnection">百度</li>
                    <li class="jumpConnection">搜狐</li>
                </ul>
            </div>

3.jqeury操作li元素

    /*$(".jumpConnection").click(function () {
        var obj1=document.getElementsByClassName('jumpConnection');
        for(let i = 0; i<obj1.length; i++){
            obj1[i].onclick = function(e){
                if(obj1[i].innerHTML=="百度"){
					newWin("https://wwww.baidu.com",1);	
                }else  if(obj1[i].innerHTML=="搜狐"){
                  	newWin("https://www.sohu.com",2);	
                }

            }

        }

    })
/**
  * 解决被浏览器拦击问题
*/	
function newWin(url,id){
    var a=document.createElement('a');
    a.setAttribute('href',url)
    a.setAttribute('target','_blank')
    
    if(!document.getElementById(id)){
        document.body.appendChild(a);
    }
    a.click();
}

方法二
1.直接在li使用onclick调用newWin方法

 <div class="row skip">
                <ul>
                     <li class="jumpConnection" onclick="newWin('https://wwww.baidu.com',1)">百度</li>
                    <li class="jumpConnection" onclick="newWin('https://www.sohu.com',2)">搜狐</li>
                </ul>
            </div>