Question

我一直在尝试修改Bootstrap的标签，以使我的图库首先变得透明，当标签处于活动状态时，会使许多元素变得不透明。

我意识到它没用，因为 id 的元素不能重复。所以我尝试了 id0，id1，id2 ，并且还学会了 href 也不支持它。

  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#1">Tab1</a></li>
    <li><a data-toggle="tab" href="#2">Tab2</a></li>
    <li><a data-toggle="tab" href="#3">Tab3</a></li>
    <li><a data-toggle="tab" href="#4">Tab4</a></li>
    <li><a data-toggle="tab" href="#5">Tab5</a></li>
    <li><a data-toggle="tab" href="#6">Tab6</a></li>
    <li><a data-toggle="tab" href="#7">Tab7</a></li>
  </ul>
  <div class="tab-content">
    <div class="material-gallery">
          <div class="tab-pane" id="1"> <img src="images/10.jpg"></div>
          <div class="tab-pane" id="2"> <img src="images/20.jpg"></div>
          <div class="tab-pane" id="3"> <img src="images/30.jpg"></div>
          <div class="tab-pane" id="4"> <img src="images/40.jpg"></div>
          <div class="tab-pane" id="1"> <img src="images/11.jpg"></div>
          <div class="tab-pane" id="2"> <img src="images/21.jpg"></div>
          <div class="tab-pane" id="3"> <img src="images/31.jpg"></div>
          <div class="tab-pane" id="4"> <img src="images/41.jpg"></div>
          <div class="tab-pane" id="1"> <img src="images/12.jpg"></div>
          <div class="tab-pane" id="2"> <img src="images/22.jpg"></div>
          <div class="tab-pane" id="3"> <img src="images/32.jpg"></div>
          <div class="tab-pane" id="4"> <img src="images/42.jpg"></div>
    </div>

.material-gallery .tab-pane {
    opacity:0.25;
}
.material-gallery .active {
    opacity:1;
}

现在，它有点起作用了。但我的目标是找出一种正确的图像分类方法，因此，一个标签会影响多个图像。

P.S。我无法在bootstrap.js

中找到js行

Answer 1

我找到了解决方案。

HTML

     <div class="btn-group">
        <button class="btn-0">Tab 0</button>
        <button class="btn-1">Tab 1</button>
        <button class="btn-2">Tab 2</button>
        <button class="btn-3">Tab 3</button>
        <button class="btn-4">Tab 4</button>
        <button class="btn-5">Tab 5</button>
        <button class="btn-6">Tab 6</button>
        <button class="btn-all">All</button>
     </div>
     <div class="tab-content">
        <div class="material-gallery">
              <div class="mat mat0 mat1"> <img src="images/1.jpg"></div>
              <div class="mat mat1"> <img src="images/2.jpg"></div>
              <div class="mat mat1"> <img src="images/3.jpg"></div>
              <div class="mat mat1"> <img src="images/4.jpg"></div>
              <div class="mat mat1"> <img src="images/5.jpg"></div>
              <div class="mat mat2"> <img src="images/6.jpg"></div>
              <div class="mat mat2 mat3"> <img src="images/7.jpg"></div>
              <div class="mat mat3"> <img src="images/8.jpg"></div>
              <div class="mat mat3 mat4"> <img src="images/9.jpg"></div>
              <div class="mat mat4 mat5 mat6"> <img src="images/10.jpg"></div>
              <div class="mat mat5 mat6"> <img src="images/11.jpg"></div>
              <div class="mat mat6"> <img src="images/12.jpg"></div>
        </div>

CSS

.mat { 
 opacity:0.25;
}
.mat.active {
 opacity:1;
}

的Javascript

$(document).ready(function(e) {
    if($('.mat').hasClass('active') == false) {
        $('.mat').addClass('active');
    }
});
$('button').on('click', function(event) {
    if($('.mat').hasClass('active') == true) {
        $('.mat').removeClass('active');
    } else {
    }
});
$('.btn-0').on('click', function(event) {
    if($('.mat0').hasClass('active') == false) {
        $('.mat0').addClass('active');
    } else {
        $('.mat0').removeClass('active');
    }
});
$('.btn-1').on('click', function(event) {
    if($('.mat1').hasClass('active') == false) {
        $('.mat1').addClass('active');
    } else {
        $('.mat1').removeClass('active');
    }
});
$('.btn-2').on('click', function(event) {
    if($('.mat2').hasClass('active') == false) {
        $('.mat2').addClass('active');
    } else {
        $('.mat2').removeClass('active');
    }
});
$('.btn-3').on('click', function(event) {
    if($('.mat3').hasClass('active') == false) {
        $('.mat3').addClass('active');
    } else {
        $('.mat3').removeClass('active');
    }
});
$('.btn-4').on('click', function(event) {
    if($('.mat4').hasClass('active') == false) {
        $('.mat4').addClass('active');
    } else {
        $('.mat4').removeClass('active');
    }
});
$('.btn-5').on('click', function(event) {
    if($('.mat5').hasClass('active') == false) {
        $('.mat5').addClass('active');
    } else {
        $('.mat5').removeClass('active');
    }
});
$('.btn-mat6').on('click', function(event) {
    if($('.mat6').hasClass('active') == false) {
        $('.mat6').addClass('active');
    } else {
        $('.mat6').removeClass('active');
    }
});
$('.btn-all').on('click', function(event) {
    if($('.mat').hasClass('active') == false) {
        $('.mat').addClass('active');
    } else {
        $('.mat').removeClass('active');
    }
});

我如何制作标签 - 当点击时 - 制作众多元素＆＃39;风格变化

1 个答案: