用js设置元素样式， 页面加载过慢时，样式不起作用

Question

用js设置来设置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)
    }
    
})

但是在页面加载的时候会出现这样的问题。

这样的情况要如何解决?

Answer 1

你的js是写在哪里？js先于页面加载完成之前执行
把js写在window.onload里边
或者写在body结束标签之前

Answer 2

window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数，ocument.addEventListener("DOMContentLoaded", init, false);页面加载之前执行js

Answer 3

js执行完毕再显示页面，之前隐藏掉

Answer 4

写在window.onload里面

Answer 5

一方面li是怎么定位的，还有最好把单位都加上，虽然默认是px

Answer 6

其实可以直接用css做就不会有这个问题，如果非要用js 那可以先隐藏 执行了你的js计算后在显示即可

Answer 7

改成如下即可

$(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)
    }
    
})

Answer 8

先CSS给默认的一个ul的宽度？

Answer 9

我个人认为能使用css实现的尽量别用JS，看你的结构我猜测的解决方法有
1、使用flex布局，平分每一个li的宽度。使用css选择第三个li，让它内部的字体变大，或者增加一个能让字体变大的类，用js控制即可；
2、给li写成百分比宽度，超出的li隐藏，左右滑动始终使当前展示的第三个字体增大即可；

由于不知道你项目的具体需求，因此表述拙见，说的不对，多多包涵。