如何更改CSS显示无或按钮单击块 [英] How to change css display none or block with button click

查看：79
本文介绍了如何更改CSS显示无或按钮单击块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



举例，
button class =1点击结果 - first-img class display：block ，
second-img class display：none，third-img class display：none。



button class =2点击结果 - img class display：none，
second-img class display：block，third-img class display：none。



button class =3click结果 - first-img class display：none，
second-img class display：none，third-img class display：block。



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



ol，ul，li {list-style：none;}。位置：相对; 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> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3erclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3erclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3erclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3erclass =third-img/> < / li>< / ul>

解决方案使用属性类和使用 nth-child（）来选择类号图片。这里是我的简短回答：

$ $ $ $''code $（'button'）。click（function（）{
var number = $（this）.attr（'class'）;
$（'ul li img'）。css（'display'，'none'）;
$（'ul li img：n-child （'+ number +'）'）。css（'display'，'block'）;
}）

请参阅下面的代码片段以获取问题要求：

$ （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-page （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（ 活性）; * /}}）; linkRealSliders（realSlider，realThumbSlider）;如果（X（＃bxslider-pager li）.length <4）{X（＃bxslider-pager .bx-next）。hide（）; （）//sincronizza sliders realizzazionifunction 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）;}）;} //滑块！= $ thumbSlider。 slider是realsliderfunction changeRealThumb（slider，newIndex）{var $ thumbS = X（＃bxslider-pager）; $ thumbS.find（有效。）removeClass（ 活性）。 $ thumbS.find（的Li [数据slideIndex = + newIndex +]）addClass（ 活性）。如果（slider.getSlideCount（） - &newIndex GT; = 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;显示：块;} 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 /库/ bxslider / 4.2.5 / jquery.bxslider.min.js>< /脚本> < 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> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3rdclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3rdclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3rdclass =third-img/> < /锂> <李> < img src =http://placehold.it/980x625/?text=image-1stclass =first-img/> < img src =http://placehold.it/980x625/?text=image-2ndclass =second-img/> < img src =http://placehold.it/980x625/?text=image-3rdclass =third-img/> < /锂> < / ul>< ul id =bxslider-pager> < li data-slideIndex =1>< a href =>< img class =firstsrc =http://placehold.it/235x150/?text=image-1stalt =thumb-imgwidth =235height =150>< / a> < li data-slideIndex =2>< a href =>< img class =firstsrc =http://placehold.it/235x150/?text=image-2stalt =thumb-imgwidth =235height =150>< / a> < li data-slideIndex =3>< a href =>< img class =firstsrc =http://placehold.it/235x150/?text=image-3rdalt =thumb-imgwidth =235height =150>< / a> < li data-slideIndex =4>< a href =>< img class =firstsrc =http://placehold.it/235x150/?text=image-4thalt =thumb-imgwidth =235height =150>< / a>< / ul>


Click the button when the display property changes.

example, button class = "1" click results - the first-img class display: block, The second-img class display: none, the third-img class display: none.

button class = "2" click results - the first-img class display: none, The second-img class display: block, the third-img class display: none.

button class = "3" click results - the first-img class display: none, The second-img class display: none, the third-img class display: 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>

解决方案

Take the class number using attribute class and the use nth-child() to select the image. Here is my short answer:

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

See the snippet below for the question requirements:

$(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>

这篇关于如何更改CSS显示无或按钮单击块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆