使用 jQuery 在点击时应用不同的 CSS 类

Posted 2023-03-06

【中文标题】使用 jQuery 在点击时应用不同的 CSS 类

【英文标题】：Applying different CSS class on click using jQuery

【发布时间】：2012-02-29 05:47:24

【问题描述】：

我目前正在建立一个 WordPress 网站，使用来自 ThemeForest 的 this template，这是我目前正在开发的 live preview（现在应该可以使用 - 请让我知道如果它不工作）。

我配置了 CSS，使悬停时的左边框为浅灰色。然后，当点击链接时，左边框将是我选择的蓝色。

如下所示，我在导航方面遇到的主要问题在于 CSS。 Portfolio 链接（图片中的 Portfolio 部分）仍然应用了选定的类以及内部无序列表项。我想让它看起来像图片中的博客部分，其中博客链接不再应用所选的类项。

我询问了模板的创建者为什么会这样；他的回答是下面需要另一个链接，其中包含标题属性“allportfolio”，这样它才能正常工作。我尝试将此属性添加到主要投资组合链接，但随后完全关闭了列表。

创建菜单时，浏览器会在 html 中按以下方式创建投资组合选择：

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

我尝试了类似于this answer 的东西，但没有奏效，因为它似乎没有在列表项中包含任何内容。下面的 jQuery 代码是我的尝试：

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function()
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    );

我觉得卡住了，因为我不知道如何让 HTML 看起来像下面（取出 CSS 类 'selected' 并添加 CSS 类 'menu-item'）：

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

更新：@limelights 的答案似乎有效，但我发现一些 jQuery 会影响网站上的链接悬停效果，并且不确定这是否是代码答案不起作用的原因WordPress 模板的 scripts.js 文件

/* Links roll over effect */
    $('a').each(function()
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    )

另外，我非常接近我想要完成的任务，使用此代码最终保持内部链接打开：

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function()
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css('color' : '#222').addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        );

但是，它仍然在做的是（如下所示），它仍然选择文本，就像所选文本一样。

非常感谢任何帮助！

【问题讨论】：

我没有完全得到问题，您是否希望在选择子元素时取消选择父元素？

@OmidAmraei 如果我不是很清楚，我很抱歉。我确实希望在选择子元素时取消选择父元素。

我在实时预览中看到的正是您想要的。我认为您使用错误的代码编辑了模板。

@OmidAmraei 我明白你的意思，但我正在尝试的内容与实时预览中显示的内容之间的唯一区别是我不想要 All 链接。这确实使我想要的工作，但我不希望 All 链接显示在主 Portfolio 链接中。

嗨，阿布里尔。我仍然对您的问题感到有些困惑。这是我看到的预期行为......当我将鼠标悬停在其部分中的元素上时，我只看到带有灰色左侧选项卡的父显示。你不希望父母有这种悬停状态吗？例如，假设我在投资组合下，然后单击“网站设计”，问题是什么，父容器仍然显示悬停状态？我在您提供的预览中没有看到任何奇怪的行为。您引用的“全部”链接在哪里？

【参考方案1】：

我对你的 css 做了一些小改动，并在你的 html 页面中添加了一些 jquery 函数，如下所示：

CSS 更改：

在你的 custom.css 中找到第 67 行，并将编码替换如下，

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a 
   background:#FFF;
   border-left:6px solid #F0F0F0;

上面这个替换成

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a 
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/

在您的主题页眉或页脚文件的某些位置添加 Jquery 功能，如下所示，

<script type="text/javascript">
$(document).ready(function() 
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function()$(this).css("border-left","6px solid #F0F0F0"););
$("#menu-main-menu li").click(function() 
  $(this).addClass("selected");
);
);
</script>

以上更改对我有用。，查看它的实际效果：http://jsbin.com/ehagal/1

我认为这可以帮助您解决问题。

【讨论】：

这实际上帮助解决了问题！ :) 现在我正在想办法把我写的东西结合起来，并把它放在我上面写的代码中。

不，谢谢@JohnPeter :) 这非常有帮助！现在要在 scripts.js 文件中实现它，我们开始吧。 :)

【参考方案2】：

这会给您带来预期的行为吗？

  $('a').each(function(e)
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   )

添加 e.preventDefault() 应该可以解决问题。

2012 年 12 月 10 日更新：

尝试将点击功能更新为以下内容：

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function()
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function()
        $(this).removeClass("selected").css('color' : '#888').addClass('menu-item');
        $(this).first("div").show();
    );
    linkClicked.css('color' : '#222')
);

【讨论】：

这个问题与上面新修改的问题不再相关。如果有人能帮我解决这个问题，我一定会很感激的。

您是在谈论将其与@limelights 答案一起插入吗？

很抱歉，但这并没有给我预期的行为。 :( 对于主题，它实际上不允许任何主题正常工作（例如，侧边栏和投资组合没有在悬停时展开）。

查看更新的代码，确保复制整个内容，包括 .on("click" 修改。（整个事件）

这看起来有人希望为他们完成工作，而不是根据给出的答案来学习..

【参考方案3】：

如果您有我在实时预览中看到的内容的副本而没有可提及的自定义，那么添加一些 jQuery 应该可以解决您的问题。

$("#menu-main-menu li").click(function() 
    $("#menu-main-menu li").removeClass("selected"); 
);

【讨论】：

当被选中时，它不会从父元素中移除选中的类。 :( 但唯一可自定义的更改是 CSS 中的，与链接无关。

这是我在实时预览中测试的并且正在工作。如果不适合您，您的模板副本应该会有所不同。

是的，它有点不同。我将发布我修改过的模板，因为我想我今天晚些时候在这里让大家感到困惑，以便让大家有更好的想法并编辑我的答案。

查看上面更新的帖子，带有新的实时预览。抱歉耽搁了。

【参考方案4】：

如果我理解正确，如果您能够插入任何类型的脚本，这应该会对您有所帮助。 :)

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event)
    $('ul#menu-main-menu > li').removeClass('selected');
    alert($('ul#menu-main-menu > li').attr('class'));
    $('ul#menu-main-menu li').addClass('menu-item');
    alert($('ul#menu-main-menu > li').attr('class'));
    event.preventDefault();
);

我希望这就是你所追求的！ :)

您可以在 TInker.io 上试用 here

我添加了两个警报，以便您可以看到该类实际上已被删除，然后添加了一个不同的类。您当然必须指定新类在 css 中的外观。

【讨论】：

感谢您的解决方案。它似乎有效，但我继续遇到的代码问题是，每当我点击内部列表项时，它不会保持打开状态，因此会从主链接中删除选定的类。

limelights，尝试将 e.preventDefault() 添加到您的解决方案中。这可能就是他看到它刷新的原因

添加 $('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(e) $('ul#menu- main-menu > li').removeClass('selected'); alert($('ul#menu-main-menu > li').attr('class')); $('ul#menu-main-menu li').addClass('menu-item'); alert($('ul#menu-main-menu > li').attr('class')); e.preventDefault(); );

完成！感谢您的输入！ :D

没问题@limelights，但是我尝试了您重新编辑的代码，似乎它也不起作用。 :( 它仍然给我与旧代码相同的效果。抱歉让我失望了。