如何解决Javascript,URL解析,字符串处理,导航
| 以下是我在HTML / CSS / Javascript中创建的垂直导航菜单的脚本。您会注意到导航菜单是使用列表(ul和li)创建的... 我的问题是... 我希望每个链接都以粗体显示,并在该页面上显示»。 使用Javascript,我该怎么做?每个页面都有一个与链接非常相似的文件夹(例如,子项目1的路径为sitename.com/path/sub-item-1)... 我想我可以以某种方式获取URL(我已经在代码中完成了),以某种方式从链接中获取字符串...然后重新插入该字符串,但在其中添加一个和»。 编辑:我应该提到...此导航是一个包含在我所有页面中的附件,因此,在每个文档上手动添加粗体和»都不是解决此问题的可行方法。 谢谢你的帮助! <!-- Left Navigation starts here -->
<!-- if IE -->
<div id=\"IE_nav\">
<!-- endif IE -->
<div id=\"left_nav\">
<ul>
<a href=\"#\"><li id=\"nav_1\" class=\"nav_button\">NAV ITEM 1</li></a>
<li class=\"sub_nav_box\" id=\"sub-nav-1\" style=\"display: none;\">
<ul>
<li><a href=\"#\">Sub-Item 1</a></li>
<li><a href=\"#\">Sub-Item 2</a></li>
</ul>
</li>
<a href=\"#\"><li id=\"nav_2\" class=\"nav_button\">NAV 2</li></a>
<li class=\"sub_nav_box\" id=\"sub-nav-2\" style=\"display: none;\">
<ul>
<li><a href=\"#\">Sub-Item 1</a></li>
<li><a href=\"#\">Sub-Item 2</a></li>
</ul>
</li>
</ul>
</div></div>
<script type=\"text/javascript\">
var URL = window.location.protocol + \"://\" + window.location.host + \"/\" + window.location.pathname;
var pathArray = window.location.pathname.split(\'/\');
if (pathArray[2] == \"nav_1\")
{
document.getElementById(\"#\").style.display = \'block\';
document.getElementById(\'#\').className = \'nav_selected\';
}
if (pathArray[2] == \"nav_2\")
{
document.getElementById(\"#\").style.display = \'block\';
document.getElementById(\'#\').className = \'nav_selected\';
}
</script>
您基本上可以忽略目前为止我所拥有的(因为它可以按我的需要工作),但是我如何在子项链接的前面放置一个»并使其变粗呢...使用javascript。
再次感谢!
解决方法
每个文件夹中都有另一个页面时。您可能还为每个页面都有另一个文件。
因此,您可以在每个文件夹中的每个文件中手动将类添加到特定的导航项吗?
假设您没有使用PHP或其他东西在主布局/索引中“包含”页面。
当您使用要包含的内容(在这种情况下,导航本身):
您可以用斜杠“ 1”分隔URL。
就像在您的脚本中一样,但是那里有些错误。
这里更好的是:
网址:
http://site.ext/path/sub-item-1/
var url = window.location.href;
url = url.split(\'/\');
url = url[4];
/*
4 because:
0 = http:
1 = <nothing between the two slashes>
2 = site.ext
3 = path
4 = sub-item-1/
*/
document.getElementById(url).className = \'active\';
假设您使用的是PHP:
您可以向每个导航项添加PHP片段,并在其中回显该类。
这样,您将永远不会在客户端使用JavaScript遇到任何问题。
<li<?php echo ($_GET[\'page\'] == \'sub-item-1\' ? \' class=\"active\"\' : \'\'); ?>>Sub Item 1</li>
为使文本加粗并添加»
:
您必须使用CSS执行此操作:
li.active {
font-weight: bold;
}
li.active:before {
content: \"» \";
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。