首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery在单击时应用不同的CSS类

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

Stack Overflow用户
提问于 2012-02-08 03:13:09
回答 4查看 3.5K关注 0票数 19

我目前正在建立一个WordPress站点,使用的是来自ThemeForest的this template,这是我目前正在工作的live preview (现在应该可以工作了-如果它不工作,请告诉我)。

我对CSS进行了配置,使悬停时的左侧边框显示为浅灰色。然后,当点击链接时,左边的边框就是我选择的蓝色。

如下所示,我遇到的导航的主要问题是CSS。Portfolio链接(图片中的Portfolio Section )仍然具有正在应用的选定类,以及内部无序列表项。我希望它看起来像图片中的博客部分,其中博客链接不再应用所选的类项目。

我问模板的创建者为什么会发生这种情况;他的回答是,下面需要有另一个包含标题属性'allportfolio‘的链接,这样它才能正常工作。我尝试将此属性添加到主项目组合链接,但随后完全关闭了该列表。

创建菜单后,浏览器将以以下方式在HTML中创建项目组合选择:

代码语言:javascript
复制
<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代码是我的尝试:

代码语言:javascript
复制
/*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'):

代码语言:javascript
复制
<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文件中代码不起作用的原因

代码语言:javascript
复制
/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

此外,我非常接近我想要实现的目标,使用此代码最终保持内部链接开放:

代码语言:javascript
复制
/*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();
        });

但是,它仍然在做的(如下所示)是它仍然像选择的文本一样选择文本。

任何帮助都是非常感谢的!

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-12-11 19:50:20

我在css中做了一些小改动,并在html页面中添加了一些jquery函数,如下所示:

Css更改:

找到custom.css中的第67行,并将代码替换为以下代码:

代码语言:javascript
复制
/*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;
}

这上面的一个替换成

代码语言:javascript
复制
/*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函数,如下所示:

代码语言:javascript
复制
<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

我认为这可能会帮助你解决你的问题。

票数 1
EN

Stack Overflow用户

发布于 2012-02-08 03:16:23

这是否为您提供了预期的行为?

代码语言:javascript
复制
  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

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

2012年12月10日更新:

尝试将单击函数更新为以下内容:

代码语言:javascript
复制
$('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'})
});
票数 3
EN

Stack Overflow用户

发布于 2012-12-06 05:46:32

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

代码语言:javascript
复制
$('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中的外观。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9182360

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档