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');
});

li 元素，类“标题已选中”是默认/选定元素。

点击其他 li 元素后我想要实现的目标：

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

简而言之，从默认值中删除“标题选定”列表类，将此类分配给新单击的元素，同时将锚点href添加到默认值，并从中删除锚点标记新点击的元素。

先谢谢你们！：）

Answer 1

为了使这更容易实现，我建议你不要添加/删除a中的li元素，只需使用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 demo

请注意，我已将您的'标题选定'类名称连接成一个单独的，驼峰式的'headingSelected'，同样，在链接的演示中，我不得不猜测第一个链接的URL应该是什么。所以请注意，如果你应该尝试直接复制/粘贴。

<小时/> 已编辑以解决我用于页内导航或Ajax交互的错误观念。

以下似乎有效，但需要包含在需要该功能的所有页面中（无论是在文档的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 demo

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

更简洁，但与之前编辑的答案完全相同，您可以改为：

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 selector。

Answer 2

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

$('.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');
});

jQuery导航问题

2 个答案: