Question

如何从网址中删除.html并添加公共类示例inners

这是我的代码：

$(document).ready(function() {
 var path = window.location.pathname;
 var newClass = path.match(/[^\/]*[^\d\/][^\/]*/);
 $('body').addClass(newClass[0]);
});

实际代码的结果是：<body class="lastname.html">

应为<body class="inners lastname">

- 编辑 -

这是代码：

<script>
$(document).ready(function() {
    // Get the current URL
    var path = window.location.pathname;
    // Split the path up by the backslash that separates directories ->
    // Pop the last array element ->
    // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
    var newClass = path.split("/").pop().replace(/.html|.php|.htm/gi,'');
    // Update the body class
    $('body').addClass(newClass+" inners");
});

see image attached

Answer 1

您可以分三步完成此操作，一次是在document.ready函数内。

您可以使用原生JavaScript方法解析您在一行中设置课程所需的网址。

使用“/”（反斜杠）拆分路径变量，以创建由分隔URI部分的字符拆分的URL数组。你要找的那部分就在最后。

JavaScripts pop方法可以轻松提取最后一个数组元素。

JavaScripts replace方法接受字符串和正则表达式。这里使用的“/.html | .php | .htm / ji”告诉浏览器替换弹出方法中出现的字符串的任何部分，即“.html”或（|）“。php”或（ |）“。htm”，空格为0空格。

您也可以通过这种方式将字符串设置为变量，而不必选择通过和数组（newClass [0]）。

<script>
    $(document).ready(function() {
        // Get the current URL
        var path = window.location.pathname;
        // Split the path up by the backslash that separates directories ->
        // Pop the last array element ->
        // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
        var newClass = path.split("/").pop().replace(/.html|.php|.htm/gi,'');
        // Update the body class
        $('body').addClass(newClass+" inners");
    });
</script>

编辑：

要缩短它，而不是设置变量，你可以只执行jQuery的addClass方法中的方法，如下所示：

<script>
    $(document).ready(function() {
        // Get the current URL
        // Split the path up by the backslash that separates directories ->
        // Pop the last array element ->
        // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
        // Update the body class
        $('body').addClass(window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"")+" inners");
    });
</script>

编辑：

在回应评论时，我提供了另外两个选项来解决这个问题：

这个添加了一个三元运算符，您可以在一行中设置特定的页面名称，它只会检查它们并在变量中设置类名。

<script>
    $(document).ready(function() {
        // Get the current URL
        // Split the path up by the backslash that separates directories ->
        // Pop the last array element ->
        // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
        var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
        // Ternary Operator to check if the page is lastname
        // If it is, it adds lastname and inners as a class.
        // If not, it only adds inners as a class
        (name = 'lastname') ? (customClass=name+" inners") : (customClass="inners");
        // Update the body class
        $('body').addClass(customClass);
    });
</script>

在这个选项中，我已经实现了一个Switch语句，在这种情况下，你可以为你想要的每个页面设置自定义类，并使用“默认”选项，设置一个以继续任何与任何不匹配的任何一个例。

<script>
    $(document).ready(function() {
        // Get the current URL
        // Split the path up by the backslash that separates directories ->
        // Pop the last array element ->
        // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
        var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
        // If you have more than one instance where you would like to apply different
        // values based where the user is, use a switch statement
        switch (name) {
            case 'lastname':
                var customClass = name+" ";
                break;
            case 'account_page':
                var customClass = name+" ";
                break;
            case 'index':
                var customClass = name+" ";
                break;
            default:
                // Set the customClass to an empty string
                var customClass = "";
        }
        // If you want the customClass to always have a default setting you can apply
        // that here
        customClass += "all-pages";
        // Update the body class
        $('body').addClass(customClass);
    });
</script>

编辑：

关于评论中的进一步讨论，请尝试这种方法。

此处，如果获取页面名称的方法集合为空，则用户位于站点的根目录（www.example.com/）。所以我们在它上面运行一个简单的if语句来查看它是否有值。如果它确实有值，那么我们会将页面名称和附加的“inners”类添加到正文中。

<script>
    $(document).ready(function() {
        // Get the current URL
        // Split the path up by the backslash that separates directories ->
        // Pop the last array element ->
        // RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
        var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
        // If the location comes back empty, it is at the site root. Anything with a value
        // is an "inner" page.
        if(name != '') {
            $('body').addClass(name+" inners"); 
        }

        // Optionally you can run it in a ternary to save space by commenting out the above if statement and uncommenting the line below.
        // (name != '') ? $('body').addClass(name+" inners") : $('body').addClass("");
    });
</script>

从网址名称中删除扩展程序，并向正文

1 个答案: