1

我有一个英文和西班牙文的网站，在网站的每个页面中都有一个链接指向该特定页面的西班牙文版本，所以如果用户在“home.php”页面上，它看起来像这样：

<div id="language">
    <ul class="language">
        <li class="english"><a href="#" class="active" title="English"></a></li>
        <li class="divider"></li>
        <li class="spanish"><a href="inicio.php" class="notactive" title="Español"></a></li>
    </ul>
</div>

我想做的是将<a>HTML 中标签中的 href 和 class 留空，并根据用户所在的页面分配一个 class 和 href URL <a>，例如，我可以添加语言 div 到外部文件，并使用 an<include>将其附加到每个页面。为此，我使用以下代码：

$('ul.menubar a').each(function(){
    if(location.href.match('home.php')){
        $('ul.language li.english a').addClass('active');
        $('ul.language li.english a').append(function() {
            $(this).attr('onclick', 'return false;');
        });
        $('ul.language li.spanish a').addClass('notactive');
        $('ul.language a[href!="home.php"]').append(function() {
            $(this).attr('href', 'inicio.php');
        });
    }
}

问题是该网站的英文版在导航栏中有 4 个链接（home.php、services.php、aboutus.php、contact.php），而西班牙文版也是如此（带有相应的 URL 名称翻译） . 我认为必须重复该代码 8 次（每个链接 1 个，每种语言 4 个链接）会过多，实际上会添加更多代码，而不是简单地在 HTML 中添加类和 href url。使用 JS 的目的是为了简化事情。

所以我基本上想知道是否有人能想到一个更好的方法来做到这一点，那不需要那么多代码。如果我需要更改某些内容，我试图避免不得不编辑每个不同的页面。另外，我想知道这是否是实现我想要使用 JavaScript 的最佳方式。

4

1 回答 1

1

HTML 最适合管理内容。CSS 最适合呈现该内容，而 JavaScript 最适合确定该内容的行为方式。而不是尝试从 JavaScript 注入链接和控制 HTML；相反，将内容留在其所属的 HTML 中，并使用 JavaScript 定义一个或两个事件处理程序，以根据超链接本身的类值采取行动。

您的英语超链接已经有一个课程，西班牙语超链接上有一个单独的课程，因此您可以利用它来发挥自己的优势。

编写点击处理程序：

由于切换“语言开关”很可能会导致设置布尔值，因此您可以使用两个点击处理程序来定位所有英语链接和所有西班牙语链接，然后根据该开关的值控制行为点击链接的时间。

// handler for all English links
$('li.english a').click(function(event) {
    event.preventDefault();
    if(/* Switch is english */) {
        window.location = $(this).attr("href");
    } 
});

// handler for all Spanish links
$('li.spanish a').click(function() {
    event.preventDefault();
    if(/* Switch is SPANISH */) {
        window.location = $(this).attr("href");
    } 
});

请注意，当单击链接时，我们首先检查开关。根据它的值，我们要么重定向到那个超链接，要么简单地阻止默认行为——进入新页面——完成。

处理演示文稿：

现在，您的另一个问题是，假设您的西班牙语网站和英语网站是同一个网站，您现在将看到总共 8 个超链接。同样，这是您的开关可以派上用场的地方。

// single handedly hide or display the relevant content, based on the switch
function switchToEnglish() {
    $('.english').show();
    $('.spanish').hide();
}

function switchToSpanish() {
    $('.spanish').show();
    $('.english').hide();
}

现在，我不知道你的 switch 函数中还包含什么，但这里的大意是我们不需要修改内容。我们只需要显示和隐藏内容。如果您还没有类似的东西，您需要将此概念集成到您现有的开关功能中。

这种方法有几个优点：

  • 您的 Web 设计人员仍会在 HTML 中看到 href，并且可以阅读和理解 HTML，而无需您的帮助或查看 JavaScript 代码。他们不仅会看到他们习惯看到的熟悉模式，而且您可能会与他们建立更好的工作关系。

  • 搜索您网站的搜索引擎将能够阅读链接并关注它们。

  • 没有 JavaScript 的浏览器将能够处理这些链接。有些人似乎在乎这个。我不。但无论如何都值得一提。

总之，你说得对，它更容易在 HTML 中管理。通过使用这种技术，您可以消除代码中您理所当然地担心的重复，并将内容移回 HTML，因为您的直觉告诉您这样做是正确的。您的代码不仅更具可读性，而且您还将获得更好的 SEO 结果。

于 2012-05-17T03:20:37.347 回答