jQuery 的导航问题

Question

我的问题如下：

我有一个简单的导航

<ul class="navigation">
                <li class="heading selected">Slider images</li>
                <li><a href="index.php?action=staticpages" title="">Static pages</a></li>
                <li><a href="index.php?action=accomodation" title="">Accomodation</a></li>
                <li><a href="index.php?action=general" title="">General</a></li>
                <li><a href="index.php?action=settings" title="">Settings</a></li>
                <li><a href="index.php?action=dologout" title="">Logout</a></li>
</ul>

和我的“未完成”jQuery 函数：

$('.navigation li a').click(function(e) {
    e.preventDefault();
    $('.navigation li').removeClass('heading selected');
    $(this).parent().toggleClass('heading selected');
});

类 "heading selected" 的 li 元素是默认/选定的元素。

单击另一个 li 元素后我想要实现的目标：

            <li><a href="index.php?action=sliderimages" title="">Slider images</a></li>
            <li class="heading selected">Static pages</li>

简而言之，从默认列表类中删除“heading selected”列表类，将该类分配给新单击的元素另外，将锚点 href 添加到默认锚点 href，并从新单击的元素中删除锚点标签。

预先感谢各位！ :)

Answer 1

为了使实现更简单，我建议您不要在 li 中添加/删除 a 元素，而只需使用 CSS 将元素样式设置为“默认文本”和 JS 来防止默认行为。

您可以使用此作为指南：

$('.navigation li a').click(
    function(){
        if ($(this).is('.headingSelected')) {
            return false;
        }
        else {
            $(this)
                .closest('li')
                .siblings()
                .removeClass('headingSelected');
            $(this).closest('li').addClass('headingSelected');
            return false;
        }
    });

JS Fiddle 演示。

请注意，我已将您的“标题选择”类名连接到一个驼峰式的“headingSelected”中，此外，在链接的演示中，我必须猜测第一个链接的 URL 应该是什么。因此，如果您应该尝试直接复制/粘贴，请注意这一点。

---

Edited to address my misconception that this was used for intra-page navigation, or Ajax interaction.

以下内容似乎可行，但需要包含在需要该功能的所有页面中（无论是内嵌在文档的 head 中还是通过链接的 js 文件）：

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages";
var page = currentURL.substring(currentURL.indexOf('=') + 1);

$('.navigation a').each(
    function(i){
        if ($(this).text().toLowerCase().replace(' ','') == page) {
            $(this).closest('li').addClass('headingSelected');
        }
    });

JS Fiddle 演示。

如果您应该使用上述内容，只需确保从 html 中删除 headingSelected 类名，并允许脚本在运行时分配该类即可。

更简洁，但在其他方面与之前编辑的答案完全相同，您可以使用：

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages";
var page = currentURL.substring(currentURL.indexOf('=') + 1);

$('a[href$="' + page + '"]').closest('li').addClass('headingSelected');

JS Fiddle demo。

参考文献：

• click()。
• is()。
• closest()。
• siblings()。
• removeClass()。
• addClass()。
• substring()。
• indexOf()。
• each()。
• text()。
• toLowerCase()。
• attrubte$="value" attribute-ends-with 选择器< /a>.

Answer 2

在这里，您有一个解决方案，可以像 David Thomas 提到的那样，从 li 中添加/删除 a 元素。

$('.navigation li a').click(function (e) {
    e.preventDefault();
    $('.navigation li').removeClass('heading selected');
    $('.navigation li').each(function (index) {
        if ($(this).children().size() == 0) {
            $(this).html("<a href='index.php?action=" + $(this).text().replace(' ', '').toLowerCase() + "'>" + $(this).text() + "</a>")
        }
    });
    $(this).parent().html($(this).text());
    $(this).parent().toggleClass('heading selected');
});