Question

我在静态网站上创建了半动态网页标题，在每个页面上使用以下内容（例如）：

<?php $title="Example"; ?>

并将其添加到我的头文件中：

<title>Company Name Here<?php if ($title!="") { echo " | $title"; } ?></title>

那部分运作良好。

现在，我想使用jQuery来检查ACTIVE页面的页面标题是否在一个数组中，以便（如果是）我可以将一个类应用于一个或两个导航元素。并且，如果它不在数组中，我将删除该类。像这样（部分伪代码）：

if $(title) of currently visible page is in this array(about, page2, page3) {
     $('a#idname').addClass('selected')
} else {
     $('a#idname').removeClass('selected')
}

也许有更好的方法来做到这一点。我愿意接受建议。我对确定的语法不太清楚：

当前加载的页面
如何使用当前页面的某些标识符在页面加载后更改页面上元素的类。我知道如何在点击时这样做，但是一旦页面加载，课程就会消失。

任何帮助非常感谢。提前谢谢！

Answer 1

您可以通过访问title对象document上的document.title媒体资源来检索文档的标题。为了在管道|之后获取字符串的一部分，您可以简单地在|字符上拆分标题，然后在返回的数组中获取第二个元素。

如果页面的标题是＆＃34;公司名称在这里|关于＆＃34;与您的问题一样，document.title.split('|')会返回数组["Company Name Here ", " About"]，因此.split('|')[1]将返回字符串＆＃34;关于＆＃34;。

使用.indexOf() method检查title字符串是否在数组titleArray中，然后相应地添加/删除该类。

这是一个基本的例子：

＆＃13;

var title = document.title.split('|')[1];
var titleArray = ['About', 'Page2', 'Page3'];

if (title && titleArray.indexOf(title.trim()) > -1) {
  $('span').addClass('selected');
} else {
  $('span').removeClass('selected');
}

＆＃13;

.selected { color: #f00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Company Name Here | About</title>
<span>The title is in the array if this is red.</span>

＆＃13;

通过jQuery检查页面标题是否在数组中

1 个答案: