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

时间：2016-11-27 15:46:18

标签： javascript jquery html css

说明

我在this template上使用MixItUp插件。
基本上，我有一个简单但很难（至少对我而言，因为我是网络新手） dev）怀疑我试图在没有成功的情况下解决：当我点击文本时，我想强调（因为它在点击时突出显示绿色）“过滤器选项卡”（All，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>

提前致谢，
路易斯。

1 个答案:

答案 0 :(得分：1)

您可以达到以下所需。

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

＆＃13;
＆＃13; 
$(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");

      
    })

});
＆＃13; 
/*=========================================
	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%;
}

}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题