Question

我需要通过点击元素来显示文本，每个绿色的“按钮”都会显示他的文本。通过单击按钮，按钮会出现黑色边框，并显示其文本。当我点击第二个按钮时，第一个按钮必须松开黑色边框，第二个按钮获得边框。

这是简单的html

<div id="container">
    <div class="btn" id ="btn-1"></div>
    <p class="text" id="text-1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2"></div>
    <p class="text" id="text-2">
        HI i'm numbr 2
    </p>
</div>

CSS

#container
{
    height:400px;
    width:400px;
    position:relative;
}

.btn{
    width : 50px;
    height : 50px;
    border-radius : 50px;
    background-color : green;
    margin:10px auto;
}
.text
{ 
    position:absolute;
    color:red;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:150px; 
    display:none;
 }

.clicked{
    border : 3px solid #000;
}

Jquery：

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-2').toggleClass("clicked");
});

这是JSFFIDLE demo

Answer 1

您需要删除从所有按钮单击的类并将其添加到特定按钮：

＆＃13;

$('.btn').click(function(){
    $('.btn').removeClass("clicked"); 
});

$('#btn-1').click(function(){
    $('.text').hide();
	$('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass
});

$('#btn-2').click(function(){
    $('.text').hide();
	$('#text-2').show();
    $('#btn-2').toggleClass("clicked");
});

＆＃13;

#container
{
    height:400px;
    width:400px;
    position:relative;
}

.btn{
    width : 50px;
    height : 50px;
    border-radius : 50px;
    background-color : green;
    margin:10px auto;
}
.text
{ 
    position:absolute;
    color:red;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:150px; 
    display:none;
}

.clicked{
    border : 3px solid #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="btn" id ="btn-1"></div>
    <p class="text" id="text-1">
        HI i'm numbr 1
    </p>
    
    <div class="btn" id ="btn-2"></div>
     <p class="text" id="text-2">
        HI i'm numbr 2
    </p>
</div>

＆＃13;

Answer 2

$('.btn').click(function(){

    //$('#text-2').show();
    if('btn-1' ==$(this).attr('id')){
        $('#btn-1').addClass('clicked');
        $('#btn-2').removeClass('clicked');
        $('#text-1').show();
        $('#text-2').hide();
    }else{
        $('#btn-2').addClass('clicked');
        $('#btn-1').removeClass('clicked');
        $('#text-2').show();
        $('#text-1').hide();
    }

});

demo

Answer 3

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass
    $('#btn-2').removeClass("clicked"); //<-- add this
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-2').toggleClass("clicked");
    $('#btn-1').removeClass("clicked"); //<-- add this

});

updated fiddle

Answer 4

我会在你重复代码时简化javascript（这并不好）

// you can also use $('[data-showbutton]').click( ...

$('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');

    // only show the selected
    $('[data-showbutton=' + btn + ']').addClass('clicked');  
    $('[data-button=' + btn + ']').show();
}

只需将data-添加到您的html中，例如：

<div id="container">
    <div class="btn" id ="btn-1" data-showbutton="1"></div>
    <p class="text" data-button="1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2" data-showbutton="2"></div>
     <p class="text" data-button="2">
        HI i'm numbr 2
    </p>
</div>

直播示例： http://jsfiddle.net/EgLKV/6484/

换句话说，data-showbutton将显示所有具有data-button的元素，例如，您可以拥有更多元素，使其更简单和可扩展。

Answer 5

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked", true); //<== toggleClass
    $('#btn-2').toggleClass("clicked", false);
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-1').toggleClass("clicked", false);
    $('#btn-2').toggleClass("clicked", true);
});

Mabye这是一个解决方案吗？

如何通过单击不同的按钮显示不同的元素

5 个答案: