Question

我正在尝试重新设计http://www.randomsnippets.com/2011/10/09/how-to-hide-or-show-content-based-on-links-or-urls-via-javascript-jquery/处的解决方案，以便与我的网站一起工作，我希望根据目录结构的一部分名称更改某些内容。

我的目录结构如下所示，我希望根据大写字母更改内容的URL部分：

http://example.com/main/MILK/content/page/

示例中的代码为：

<html>
<head>
    <title>Hiding and showing content based on URLs</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var option = 'coke';
            var url = window.location.href;
            option = url.match(/option=(.*)/)[1];
            showDiv(option);
        });
        function showDiv(option) {
            $('.boxes').hide();
            $('#' + option).show();
        }
    </script>
    <style type="text/css">
        .boxes {
            display: none;
        }
    </style>
</head>
<body>
    <div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>

</body>
</html>

我认为我需要更改以使其与我的URL结构一起使用的部分是：

            var url = window.location.href;
            option = url.match(/option=(.*)/)[1];

任何人都可以帮我解决如何查找我的目录名而不是URL参数吗？

Answer 1

您可以使用array.split

获取网址的每个部分

var parts = window.location.pathname.split('/')

在您的示例中：http://example.com/main/MILK/content/page/ 然后，你可以这样做：

console.log(parts[0]) // will be main
console.log(parts[1]) // will be MILK
console.log(parts[2]) // will be content
console.log(parts[3]) // will be page

我使用location.path获取域名后的所有内容（从字符串中删除http://exampale.com）

您可以在一行和测试条件中执行此操作：

option = location.pathname.split('/')[1]
if( option=='MILK') showDiv('...')

更多信息：

Array split() function

Answer 2

我的解决方案基于Aminadav对所有感兴趣的人的帮助：

<html>
<head>
    <title>Hiding and showing content based on URLs</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var option = 'coke';
            option = window.location.pathname.split('/')[2];
            showDiv(option);
        });
        function showDiv(option) {
            $('.boxes').hide();
            $('#' + option).show();
        }
    </script>
    <style type="text/css">
        .boxes {
            display: none;
        }
    </style>
</head>
<body>
    <div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>
</body>
</html>

Answer 3

以下对我有用。

var url = "http://example.com/main/MILK/content/page/";
option = url.split('/');
alert(option[option.length-4]);

Split（）函数是基于您传递给函数的参数呈现和呈现数组的方法。

重写javascript以显示基于URL参数的内容而不是使用目录名？

3 个答案: