Html +css +js常见问题统计

1：网站首页的导航文字 鼠标放上去 变颜色跟字体大小。如果用id这种触发方法 就需要每一个 导航文字前面都加<a id=test> 这样太麻烦，最好的办法就是用class 实现，因为id必须是唯一的

导航文字外面包一层div ，命名：BaseBox 这里是随便命名的，

如图1：

那么如何在选择哪个导航文字时就触发哪个文字呢？用this ，this表示当前鼠标接触的。

下面的方法第一个function 代表 鼠标触发到文字时，第二个function 代表鼠标离开后

$(".BaseBox a").hover( function () { $(this).css({ color: "#333333", fontWeight: "bold" }) }, function () { $(this).css({ color: "#666666", fontWeight: "" }) })

2：通过js修改图片地址，或者是文字

这里需要注意的是如何定位到 元素：用 document.getElementById("img") 定位id，img是id，修改该id的src地址，

或者是修改里面H1的文字。如果是修改文字内容就是用 innerHTML

BrandImgs[i].onmouseover = function () { this.getElementsByClassName("BrandPic1")[0].style.display = "none"; this.getElementsByClassName("BrandPic2")[0].style.display = ""; document.getElementById("img").src = "../../../Images/Home/Index/New/Brand/" + imgList[this.getElementsByClassName("BrandPic2")[0].id] + ".png"; document.getElementById("titleid").innerHTML = titleList[this.getElementsByClassName("BrandPic2")[0].id-1]; document.getElementById("brandcontent").getElementsByTagName("li")[2].innerHTML = brandList[this.getElementsByClassName("BrandPic2")[0].id-1];

}

3：在Html里面需要循环遍历某个数组内容，

优点：节省代码 维护灵活，降低维护成本 代码优雅