点击即可切换内容

时间：2015-01-23 17:27:17

标签： jquery html5 css3

我用jQuery创建了一个切换内容按钮。当它切换时，我在底部添加不同的颜色三角形按钮。此外，不是切换按钮I的三角形，而是切换包含哪个按钮处于活动状态的内容。你可以在这里找到所有代码

<div class="variation">
                    <h2>Вариант размещения</h2>
                    <div class="bt-group">
                        <div class="pr-bt-group">
                            <button type="button" class="btn btn-warning pr-bt">Warning</button>
                            <div></div>
                        </div>
                        <div class="vip-bt-group">
                            <button type="button" class="btn btn-success vip-bt">Success</button>  
                            <div></div>
                        </div>                                               
                        <div class="usual-bt-group">
                            <button type="button" class="btn btn-default usual-bt">Default</button>
                            <div></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="premium">
                        <ul class="list-group premium-text">
                            <li class="list-group-item">- 7 дней в ТОПе поисковой выдачи блок 1111</li>
                            <li class="list-group-item">- 7 дней выделения золотым цветом</li>        
                            <li class="list-group-item">- 10 автоматических поднятий на первое место поиска</li>
                            <li class="list-group-item">- 30 дней показа объявления на правой динамической ленте доски</li>
                            <li class="list-group-item">- 100 дней на сайте</li>
                        </ul>
                    </div>
                    <div class="vip">
                        <ul class="list-group vip-text">
                            <li class="list-group-item">- 7 дней в ТОПе поисковой выдачи блок 2222</li>
                            <li class="list-group-item">- 7 дней выделения золотым цветом</li>        
                            <li class="list-group-item">- 10 автоматических поднятий на первое место поиска</li>
                            <li class="list-group-item">- 30 дней показа объявления на правой динамической ленте доски</li>
                            <li class="list-group-item">- 100 дней на сайте</li>
                        </ul>
                    </div>
                    <div class="usual">
                        <ul class="list-group usual-text">
                            <li class="list-group-item">- 7 дней в ТОПе поисковой выдачи блок 33333</li>
                            <li class="list-group-item">- 7 дней выделения золотым цветом</li>        
                            <li class="list-group-item">- 10 автоматических поднятий на первое место поиска</li>
                            <li class="list-group-item">- 30 дней показа объявления на правой динамической ленте доски</li>
                            <li class="list-group-item">- 100 дней на сайте</li>
                        </ul>
                    </div>
                </div>

CSS 

    .variation .vip-text, .variation .usual-text {
    display: none;
}

.bt-group {
    margin-bottom: 20px;
}

.variation .pr-bt-group {
    float: left; /* Old browsers */   /* FF3.6+ */   /* Chrome,Safari4+ */   /* Chrome10+,Safari5.1+ */   /* Opera 11.10+ */   /* IE10+ */   /* W3C */   /* IE6-9 */;
}

.variation .vip-bt-group {
    float: left; 
}

.variation .usual-bt-group {
    float: left;
}

.pr-bt-group button {
    border: 0;
    background: rgb(241,205,88);
    background: -moz-linear-gradient(top, rgba(241,205,88,1) 1%, rgba(218,177,41,1) 50%, rgba(213,189,105,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(241,205,88,1)), color-stop(50%,rgba(218,177,41,1)), color-stop(100%,rgba(213,189,105,1)));
    background: -webkit-linear-gradient(top, rgba(241,205,88,1) 1%,rgba(218,177,41,1) 50%,rgba(213,189,105,1) 100%);
    background: -o-linear-gradient(top, rgba(241,205,88,1) 1%,rgba(218,177,41,1) 50%,rgba(213,189,105,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,205,88,1) 1%,rgba(218,177,41,1) 50%,rgba(213,189,105,1) 100%);
    background: linear-gradient(to bottom, rgba(241,205,88,1) 1%,rgba(218,177,41,1) 50%,rgba(213,189,105,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cd58', endColorstr='#d5bd69',GradientType=0 );
}

button.btn.btn-warning.pr-bt.active-link {}

.vip-bt-group button {
    background: rgb(127,205,120); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(127,205,120,1) 0%, rgba(95,192,86,1) 50%, rgba(109,198,101,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(127,205,120,1)), color-stop(50%,rgba(95,192,86,1)), color-stop(100%,rgba(109,198,101,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(127,205,120,1) 0%,rgba(95,192,86,1) 50%,rgba(109,198,101,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(127,205,120,1) 0%,rgba(95,192,86,1) 50%,rgba(109,198,101,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(127,205,120,1) 0%,rgba(95,192,86,1) 50%,rgba(109,198,101,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(127,205,120,1) 0%,rgba(95,192,86,1) 50%,rgba(109,198,101,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fcd78', endColorstr='#6dc665',GradientType=0 ); /* IE6-9 */

    border: 0;
}

.usual-bt-group button {
    background: rgb(190,190,190); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(190,190,190,1) 0%, rgba(174,174,174,1) 50%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,190,190,1)), color-stop(50%,rgba(174,174,174,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(190,190,190,1) 0%,rgba(174,174,174,1) 50%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(190,190,190,1) 0%,rgba(174,174,174,1) 50%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(190,190,190,1) 0%,rgba(174,174,174,1) 50%,rgba(184,184,184,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(190,190,190,1) 0%,rgba(174,174,174,1) 50%,rgba(184,184,184,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    border: 0;
}

.pr-bt-group, .vip-bt-group, .usual-bt-group {
    position: relative;
}

.pr-bt-group .active-link ~ div {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;   
    border-top: 10px solid #d4bc67;
    position: absolute;
    left: 50%;
    margin-left: -10px; 
}

.vip-bt-group .active-link ~ div {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;   
    border-top: 10px solid #89D084;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

.usual-bt-group .active-link ~ div {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;   
    border-top: 10px solid #B3B3B3;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}
.clearfix {
    clear:both;
}

JS 

 $(document).ready(function () {
                $('.pr-bt').click(function () {
                    $(this).addClass('active-link');
                    $('.vip-bt').removeClass('active-link');
                    $('.usual-bt').removeClass('active-link');
                    $('.premium-text').show();
                    $('.vip-text').hide();
                    $('.usual-text').hide();
                });
                $('.vip-bt').click(function () {
                    $(this).addClass('active-link');
                    $('.pr-bt').removeClass('active-link');
                    $('.usual-bt').removeClass('active-link');
                    $('.premium-text').hide();
                    $('.vip-text').show();
                    $('.usual-text').hide();
                });
                $('.usual-bt').click(function () {
                    $(this).addClass('active-link');
                    $('.vip-bt').removeClass('active-link');
                    $('.pr-bt').removeClass('active-link');
                    $('.premium-text').hide();
                    $('.vip-text').hide();
                    $('.usual-text').show();
                });
            });

我只是觉得它不是像我一样做jQuery脚本最简单的方法。所以，有人可以告诉最简单的方式，以及它是如何工作的，因为我尝试了不同的方法，但没有得到真正的结果。 JS小提琴http://jsfiddle.net/mzneo2sr/

2 个答案:

答案 0 :(得分：0)

您的脚本似乎按预期工作，所以我不清楚您的问题。然而，所有这些都可以简化为：

$('.content-link button').click(function () {
    var idx = $(this).closest('.content-link').index();

    $('.content-link button').removeClass('active-link');
    $(this).addClass('active-link');

    $('.content-panel').hide();
    $('.content-panel').eq(idx).show();
});

Demo

请注意，我已经为您的类似元素添加了一些常用类。类是一组类似的实体。

将类分别用作ID和目标元素并不是一个好主意。使用相对DOM遍历只编写一次代码。

答案 1 :(得分：0)

这是您更新的小提琴：http://jsfiddle.net/mzneo2sr/3/

通过简单的属性（data-targetDiv）添加到您的按钮，您可以使用更少的代码实现此目的。

HTML添加：

<button type="button" class="btn btn-warning pr-bt" data-targetDiv="premium-text">Warning</button>

<button type="button" class="btn btn-success vip-bt" data-targetDiv="vip-text">Success</button>

<button type="button" class="btn btn-default usual-bt" data-targetDiv="usual-text">Default</button>

您的新点击事件：

$('.bt-group button').on('click',function(){
     var $this=$(this);
     $('.bt-group').find('button').removeClass('active-link');
     $this.addClass('active-link');
     $('.list-group').hide();
     $('.' + $this.attr('data-targetDiv')).show();
 });
相关问题
最新问题