个人中心
gpt4 book ai didi

javascript - 单击另一个文本时突出显示一个文本

转载 作者：行者123 更新时间：2023-11-28 15:57:25 25 4
gpt4 key购买 nike

解释

我正在研究 this template使用 MixItUp
基本上，我有一个简单但困难的(至少对我来说，因为我是网络开发新手)怀疑我试图解决但没有成功:我想强调(因为它在点击它时突出显示绿色)“过滤器选项卡”(全部，Mix1，Mix2 ...)当鼠标悬停在每个图像上时出现的文本(Mix1，Mix2 ...)。

代码

$(document).ready(function() {

    /* ========================================================================= */
    /*	Filtering
    /* ========================================================================= */

    $(".project-wrapper").mixItUp();

});
/*=========================================
	Basic Style
==========================================*/

body {
    line-height: 21px;
    font-size: 13px;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:focus, a:hover {
    text-decoration: none;
}

body>section, .footer {
    padding: 70px 0;
}


/*=========================================
	Mix
==========================================*/

.work-filter {
    margin-bottom: 35px;
}

.work-filter ul li {
    display: inline-block;
}

.work-filter ul li a {
    color: #062033;
    display: block;
    padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
    background-color: rgba(31, 107, 76, 1);
    color: #fff;

}

.mix {
    display: none;
}

.project-wrapper {
    text-align: center;
}

.work-item {
    float: none;
    width: 30%;
    position: relative;
}

.work-item>img {
    display: block;
    height: 100%;
    width: 100%;
}

.overlay {
    background-color: rgba(31, 107, 76, .9);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 0;
}

.work-item:hover .overlay {
    opacity: 1;
}

.work-item .overlay a {
    font-size: 30px;
    display: inline-block;
    margin-top: 34%
}

.work-item .overlay a:hover {
    color: #fff;
}



/*=========================================
	Media Queries
==========================================*/



/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
  float: left;
  width: 33%;
}

}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
  float: left;
  left: 5% !important;
  width: 90%;
}

}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
  left: inherit !important;
  width: 50%;
}

}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- meta charec set -->
    <meta charset="utf-8">
    <!-- Page Title -->
    <title>MixItUp</title>

    <!--=========================================
        CSS
        =========================================-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/main.css">


    <!--=========================================
        Essential jQuery Plugins
        =========================================-->
    <!-- Main jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- jquery.mixitup.min -->
    <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <!-- Custom Functions -->
    <script src="js/custom.js"></script>
</head>

<body id="body">

    <section>
        <div class="container">
            <div class="row">

                <div class="work-filter">
                    <ul class="text-center">
                        <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                        <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                        <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                        <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                        <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                        <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                        <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="project-wrapper">

            <figure class="mix work-item mix1">
                <img src="http://imgur.com/KZfjrVT.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix2">
                <img src="http://imgur.com/GB54YZR.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix3">
                <img src="http://imgur.com/afatbzS.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix4">
                <img src="http://imgur.com/GvjT75d.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix5">
                <img src="http://imgur.com/KJ9MaK6.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix6">
                <img src="http://imgur.com/w3ZFVnq.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a>
                </figcaption>
            </figure>

        </div>

    </section>

</body>

</html>

提前致谢，
路易斯。

最佳答案

您可以实现如下所示的期望。

在过滤器类上添加事件，并在选项卡上下文中检查具有相同数据过滤器属性的元素。

$(document).ready(function() {

    /* ========================================================================= */
    /*	Filtering
    /* ========================================================================= */

    $(".project-wrapper").mixItUp();
  
    $(".filter").on("click",function()
    {
      var dFilter = $(this).attr("data-filter");
      
      var tabContext = $(".work-filter");
    
      $( "a[data-filter='"+dFilter+"']",tabContext ).addClass("active");

      
    })

});
/*=========================================
	Basic Style
==========================================*/

body {
    line-height: 21px;
    font-size: 13px;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:focus, a:hover {
    text-decoration: none;
}

body>section, .footer {
    padding: 70px 0;
}


/*=========================================
	Mix
==========================================*/

.work-filter {
    margin-bottom: 35px;
}

.work-filter ul li {
    display: inline-block;
}

.work-filter ul li a {
    color: #062033;
    display: block;
    padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
    background-color: rgba(31, 107, 76, 1);
    color: #fff;

}

.mix {
    display: none;
}

.project-wrapper {
    text-align: center;
}

.work-item {
    float: none;
    width: 30%;
    position: relative;
}

.work-item>img {
    display: block;
    height: 100%;
    width: 100%;
}

.overlay {
    background-color: rgba(31, 107, 76, .9);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 0;
}

.work-item:hover .overlay {
    opacity: 1;
}

.work-item .overlay a {
    font-size: 30px;
    display: inline-block;
    margin-top: 34%
}

.work-item .overlay a:hover {
    color: #fff;
}



/*=========================================
	Media Queries
==========================================*/



/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
  float: left;
  width: 33%;
}

}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
  float: left;
  left: 5% !important;
  width: 90%;
}

}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
  left: inherit !important;
  width: 50%;
}

}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- meta charec set -->
    <meta charset="utf-8">
    <!-- Page Title -->
    <title>MixItUp</title>

    <!--=========================================
        CSS
        =========================================-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/main.css">


    <!--=========================================
        Essential jQuery Plugins
        =========================================-->
    <!-- Main jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- jquery.mixitup.min -->
    <script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <!-- Custom Functions -->
    <script src="js/custom.js"></script>
</head>

<body id="body">

    <section>
        <div class="container">
            <div class="row">

                <div class="work-filter">
                    <ul class="text-center">
                        <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                        <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                        <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                        <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                        <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                        <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                        <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="project-wrapper">

            <figure class="mix work-item mix1">
                <img src="http://imgur.com/KZfjrVT.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix2">
                <img src="http://imgur.com/GB54YZR.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix3">
                <img src="http://imgur.com/afatbzS.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix4">
                <img src="http://imgur.com/GvjT75d.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix5">
                <img src="http://imgur.com/KJ9MaK6.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix6">
                <img src="http://imgur.com/w3ZFVnq.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a>
                </figcaption>
            </figure>

        </div>

    </section>

</body>

</html>

关于javascript - 单击另一个文本时突出显示一个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40830747/

25 4 0
文章推荐： css - 对齐元素未按预期工作
文章推荐： javascript - 计算某个类之后具有相同类的所有 div 直到 dom 末尾(包括嵌套 div)？
文章推荐： javascript - 如何将函数参数值连接到对象文字属性名称中
文章推荐： javascript - 在 JavaScript 中保留多余的空格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com