如何通过单击按钮更改css显示不显示或阻止答案

【问题标题】：How to change css display none or block with button click如何通过单击按钮更改css显示不显示或阻止
【发布时间】：2016-10-25 23:28:02
【问题描述】：

当显示属性改变时点击按钮。

例如， button class= "1" 点击结果-第一个img类显示：块，第二类显示：无，第三类显示：无。

button class= "2" 点击结果-第一个img类显示：无，第二个img类显示：block，第三个img类显示：none。

button class= "3" 点击结果-第一个img类显示：无，第二个img类显示：none，第三个img类显示：block。

codepen = http://codepen.io/soso77/pen/bwkYZX

ol,
ul,
li {
  list-style: none;
}
.slider {
  float: left;
  position: relative;
  width: 980px;
}
img.first-img,
img.second-img,
img.third-img {
  max-height: 625px;
  display: block;
}
img.second-img,
img.third-img {
  display: none;
}

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>

【问题讨论】：

是的.. 我认为你需要 js 来做这个。可能最简单的方法是使用带有 display:none; 的类图像。和一个用显示块选择的类。然后在使用 js 单击时，您会为所有具有类图像的元素删除选定的类，并根据您单击的按钮将选定的类添加到所需的图像。 PS：按钮在哪里？
@Lidaranis 按钮下方创建一个类 Ul。我可以使用 Jquery 吗？如果 Jquery 可用，你能告诉我吗？ :-)

标签： jquery html css

【解决方案1】：

使用attribute class 获取班级编号并使用nth-child() 选择图像。这是我的简短回答：

   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

问题要求见下面的sn-p：

$(document).ready(function(){

var X = jQuery.noConflict();

var realSlider= X("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);

      }

    });

    var realThumbSlider=X("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 235,
      slideMargin: 9,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*X("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */

      }
    });

    linkRealSliders(realSlider,realThumbSlider);

    if(X("#bxslider-pager li").length<4){
      X("#bxslider-pager .bx-next").hide();
    }

// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){

  X("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=X(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){

  var $thumbS=X("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");

  if(slider.getSlideCount()-newIndex>=3)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-3);

}

 
});
   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

ol, ul, li {
    list-style: none;
}

.slider {float: left;position: relative;width: 980px;}

img.first-img,img.second-img,img.third-img {
    max-height: 625px;
    display: block;
}

img.second-img,img.third-img {
    display: none;
}

.ori-image-button {position: absolute !important;top:0;left:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ori-image-button">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <div class="ori-image-button">
  
  
<button class="1">Class 1 </button>
<button class="2">Class 2 </button>
<button class="3">Class 3 </button>
</div>

-    <ul id="bxslider">
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
    </ul>

<ul id="bxslider-pager">
  <li data-slideIndex="1"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-1st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="2"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-2st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="3"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-3rd" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="4"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-4th" alt="thumb-img" width="235" height="150"></a>
</ul>

【讨论】：

谢谢。遇到这种情况怎么办？ codepen.io/soso77/pen/bwkYZX
@sosori 我应该在不更改脚本的情况下工作。刚刚更新了html。请参阅上面的更新。如果这是您要寻找的答案，请告诉我
对不起:`-(我终于尝试使用bxslider了。请点击这里。codepen.io/soso77/pen/bwkYZX
@sosori 它应该可以在不更改脚本的情况下工作。您只是忘记导入 jquery。刚刚更新了html。请参阅上面的更新。如果这是您要寻找的答案，请告诉我
@sosori 你把我的脚本放在一个函数里。不要那样做，因为它不会触发。我把它放在函数之外。如果这是您要寻找的答案，请告诉我

【解决方案2】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button data-notation="true" class="1">Class 1 </button>
<button data-notation="true" class="2">Class 2 </button>
<button data-notation="true" class="3">Class 3 </button>



 <ul>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
    </ul>

在js部分：

$(".button[data-notation=true]").on("click",function(){
    var index = parseInt($(this).attr("class"));
    $("ul#list > li > img").hide();
    $("ul#list > li > img").eq(index-1).show()
})

【讨论】：

添加的问题。你觉得这个案子怎么样？
您要加载所有第二张图片吗？或者什么

【解决方案3】：

我已在 codepen 中发布了示例，请使用此选项进行检查。

[view on codepen][1]


  [1]: http://codepen.io/satheeshmallow/pen/xEBpEr

Worked Example

【讨论】：

【解决方案4】：

我通过添加类和删除类来满足您的要求，

它将帮助您实现一些目标，

HTML：

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>
<button id="showImage1">
Show Image 1
</button>
<button id="showImage2">
Show Image 2
</button>
<button id="showImage3">
Show Image 3
</button>
<button id="showAll">
Show All
</button>

CSS：

img {
    width: 10px;
    height: 10px;
}
.display-none{
  display:none;
}
.display-inline{
  display:inline;
}

JS：

$("body").on('click','#showImage1', function(){debugger; $(".first-img").addClass('display-inline').removeClass('display-none'); $(".second-img,.third-img").addClass('display-none').removeClass('display-inline'); });

$("body").on('click','#showImage2', function(){debugger;
$(".second-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.third-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showImage3', function(){debugger;
$(".third-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.second-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showAll', function(){
$(".first-img,.second-img,.third-img").addClass('display-inline').removeClass('display-none');
});

FIDDLE

【讨论】：

【解决方案5】：

如果你喜欢，请告诉我：

JS(带 JQuery) / CSS / HTML

$("button").click(function(){
	$(".first-img").removeClass("selected");
  $(".second-img").removeClass("selected");
  $(".third-img").removeClass("selected");
  $("." + $(this).attr("data-item-class")).addClass("selected");
});

ol,
ul,
li {
  list-style: none;
}
.slider {
  float: left;
  position: relative;
  width: 980px;
}
img.first-img,
img.second-img,
img.third-img {
  display:none;
}

.selected{
  max-height: 625px;
  display:block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-item-class="first-img">Class 1 </button>
<button data-item-class="second-img">Class 2 </button>
<button data-item-class="third-img">Class 3 </button>

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>

如果你更喜欢它，或者更喜欢它https://jsfiddle.net/fart52wL/1/

此外，如果您不喜欢使用 ID，您可以使用类作为选择器。

[编辑]更新被剪断和摆弄

【讨论】：

谢谢您。添加了有问题的内容。您如何更改？ codepen.io/soso77/pen/bwkYZX
让我看看我是否做对了..您希望在您按下按钮 1 时所有类别 1 的图像都变得可见，当您按下按钮 2 时所有类别 2 的图像都变得可见， ETC.. ？更新了 sn-p 和 fiddle