用js設(shè)置元素樣式，頁(yè)面加載過(guò)慢時(shí)，樣式不起作用

圖片描述

用js設(shè)置來(lái)設(shè)置tab的寬度和定位

$(function(){

    var width = Math.round($('ul').width() / 5)
    var li = $('li')
    
    li.width(width)
    for(var i = 0; i < li.length; i++) {
        li.eq(i).css('left', i * width)
    }
    
})

但是在頁(yè)面加載的時(shí)候會(huì)出現(xiàn)這樣的問(wèn)題。
圖片描述

這樣的情況要如何解決?

回答

編輯回答

眼雜

js執(zhí)行完畢再顯示頁(yè)面，之前隱藏掉

2018年8月18日 22:00

編輯回答

懷中人

window.onload是在dom文檔樹(shù)加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)，ocument.addEventListener("DOMContentLoaded", init, false);頁(yè)面加載之前執(zhí)行js

2017年3月11日 00:12

編輯回答

空白格

一方面li是怎么定位的，還有最好把單位都加上，雖然默認(rèn)是px

2018年7月21日 17:36

編輯回答

愚念

你的js是寫(xiě)在哪里？js先于頁(yè)面加載完成之前執(zhí)行
把js寫(xiě)在window.onload里邊
或者寫(xiě)在body結(jié)束標(biāo)簽之前

2017年2月8日 20:35

編輯回答

尕筱澄

先CSS給默認(rèn)的一個(gè)ul的寬度？

2017年10月21日 22:41

編輯回答

尛憇藌

其實(shí)可以直接用css做就不會(huì)有這個(gè)問(wèn)題，如果非要用js 那可以先隱藏執(zhí)行了你的js計(jì)算后在顯示即可

2018年3月25日 18:29

編輯回答

冷溫柔

寫(xiě)在window.onload里面

2018年7月12日 14:48

編輯回答

下墜

我個(gè)人認(rèn)為能使用css實(shí)現(xiàn)的盡量別用JS，看你的結(jié)構(gòu)我猜測(cè)的解決方法有
1、使用flex布局，平分每一個(gè)li的寬度。使用css選擇第三個(gè)li，讓它內(nèi)部的字體變大，或者增加一個(gè)能讓字體變大的類，用js控制即可；
2、給li寫(xiě)成百分比寬度，超出的li隱藏，左右滑動(dòng)始終使當(dāng)前展示的第三個(gè)字體增大即可；

由于不知道你項(xiàng)目的具體需求，因此表述拙見(jiàn)，說(shuō)的不對(duì)，多多包涵。

2017年11月17日 05:03

編輯回答

法克魷

改成如下即可

$(document).ready(function(e){

    var width = Math.round($('ul').width() / 5)
    var li = $('li')
    
    li.width(width)
    for(var i = 0; i < li.length; i++) {
        li.eq(i).css('left', i * width)
    }
    
})

2017年6月18日 05:56