将类添加到主页的主体中

Add Class To Body On Homepage

本文关键字：主体 主页 添加      更新时间：2023-09-26

我正试图在主页上添加一个类到body标签。然而，它不起作用。我在做什么?

<script type="text/javascript">
    $(document).ready(function() {
          if(window.location.href===window.location.hostname) {
               $("body").addClass("home");
           }
    });
</script>

window.location.href将永远不会与window.location.hostname相同，因为前者将包含协议部分(例如:http://)，而后者不包含。

我不认为

if(window.location.href===window.location.hostname) {
}

永远不会为真。主机名将是像stackoverflow.com这样的东西，其中href将包括协议，端口和其他可能是完整url一部分的东西。你想检查

if(window.location.href.indexOf("home.html") != -1) {
}

或者类似的东西。但正如评论中所指出的那样，添加到html文件中或在服务器上生成html要简单得多

window.location.href包含协议信息，不等于window.location.hostname

按W3

  • window.location。href返回当前页面
    • 的href (URL)。
  • window.location。hostname返回web主机的域名
  • window.location。pathname返回当前页面的路径和文件名

你应该检查pathname的主页位置:

var path = window.location.pathname;
if (path == '/' || path == '/home.html') {
  $("body").addClass("home");
}

不需要jquery就可以很容易实现。

window.addEventListener("load", MyFunction);
function MyFunction(){
  if(window.location.origin == window.location.href) {
    var body = document.getElementsByTagName('body');
    body[0].className = "myclass";
  }
}

或

window.addEventListener("load", MyFunction);
function MyFunction(){
  if(window.location.origin == window.location.href) {
    document.getElementsByTagName('body')[0].className = "myclass";
  }
}

body[0]因为document.getElementsByTagName返回值是一个数组

看到这些评论，我开始思考。我试过这个，它工作。

<script type="text/javascript">
    $(document).ready(function() {
        switch (window.location.pathname) {
          case '':
          case '/index.php':
              $('body').addClass('home')
        }
    });
</script>

我忘了在问题中提到它是在一个PHP驱动的网站上。我回答我自己的问题是为了帮助那些有一天可能会有同样问题的人。

相关文章：