单击相应的“btn”时编辑“项目”的css

Edit css of "item" when clicking on corresponding "btn"

本文关键字：css 编辑 项目 btn 单击      更新时间：2023-09-26

所以我有这个

<div class="btns">
    <div class="btn1"></div>
    <div class="btn2"></div>
    <div class="btn3"></div>
    <div class="btn4"></div>
</div>
<div class="prevs">
    <div class="pre1"></div>
    <div class="pre2"></div>
    <div class="pre3"></div>
    <div class="pre4"></div>
</div>

http://jsfiddle.net/uzpxjukv/

你有 btn1、btn2、btn3 和 btn4。我试图做到这一点，以便当您按 btn1 时，带有类 pre1 的div 应该得到"display： block;"或其他使其可见的东西。然后，当单击 btn2 时，pre1 再次变为不可见，pre2 变为可见。

也许是这样的东西？如果会有更多的按钮，它应该更优化。

$('.btns').find('div').click(function(){
    $('.prevs').find('div').eq($(this).index()).toggle();
});


$('.btns').find('div').click(function(){
        $('.prevs').find('div').eq($(this).index()).toggle();
    });
.prevs div:not(.pre1) {
  display:none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
    <div class="btn1">Button 1</div>
    <div class="btn2">Button 2</div>
    <div class="btn3">Button 3</div>
    <div class="btn4">Button 4</div>
</div>
<div class="prevs">
    <div class="pre1">Previews 1</div>
    <div class="pre2">Previews 2</div>
    <div class="pre3">Previews 3</div>
    <div class="pre4">Previews 4</div>
</div>

JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/

$('.btns div').click(function() {
    var classNumber = this.className.slice(-1);
    $('.prevs div').hide();
    $('.pre' + classNumber).show();
});

单击按钮div，首先隐藏所有prediv，然后仅显示相关的div。

试试吧

$('.btns > div').on('click', function() {
  var numberOfDiv = $(this).attr('class').slice('-1'),
      prevs = $('.prevs');
      prevs.find('> div').hide();
      prevs.find('.pre' + numberOfDiv).show();
});

这个例子是你的html代码，如果可以改变它，你可以得到一个更好的代码。

看小提琴

我已经稍微更改了您的 HTML..更改了prevsdivsti id 的类属性。

.HTML 

<div class="btns">
    <div class="btn1" id="1" onClick="reply_click(this.id)"></div>
    <div class="btn2" id="2" onClick="reply_click(this.id)"></div>
    <div class="btn3" id="3" onClick="reply_click(this.id)"></div>
    <div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
    <div id="pre1"></div>
    <div id="pre2"></div>
    <div id="pre3"></div>
    <div id="pre4"></div>
</div>

.JS

function reply_click(id) {
    document.getElementById("pre" + id).style.display = "block";
}

只要你知道div 使用的命名系统，你可以使用这些东西。（要查看正常工作情况，请使用开发人员工具查看）

$('.btns div').on('click', function() {
  var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
  $('.prevs div').css('display', 'none'); //reset all divs to being hidden
  $('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
  background-color: gray;
}
.btns div, .prevs div {
  width: 2em;
  height: 2em;
  display: inline-block;
  padding-right: 0.2em;
}
.prevs div {
  background-color: red;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
    <div class="btn1"></div>
    <div class="btn2"></div>
    <div class="btn3"></div>
    <div class="btn4"></div>
</div>
<div class="prevs">
    <div class="pre1"></div>
    <div class="pre2"></div>
    <div class="pre3"></div>
    <div class="pre4"></div>
</div>

相关文章：