Question

我对jQuery一无所知，但想要实现一些非常重要的东西。

我希望有一个替换div内容的按钮/链接，如果我再次按下该按钮，则会将原始内容放回原位。

Answer 1

这是一种方法：

的 HTML：

<div id="1"> My Content 1 </div> <div id="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button>

<强> jQuery的：

$('#btnClick').on('click',function(){ if($('#1').css('display')!='none'){ $('#2').html('Here is my dynamic content').show().siblings('div').hide(); }else if($('#2').css('display')!='none'){ $('#1').show().siblings('div').hide(); } });

的的jsfiddle：
http://jsfiddle.net/ha6qp7w4/
http://jsfiddle.net/ha6qp7w4/4＆lt; ---评论

Answer 2

一个简单的addClass和removeClass将根据你的需要进行操作..

$('#change').on('click', function() { 
  $('div').each(function() { 
    if($(this).hasClass('active')) { 
        $(this).removeClass('active');
    } else { 
        $(this).addClass('active');
    }
});

}）;

Seee fiddle

我建议你在使用之前先学习jquery。

Answer 3

编辑：这个答案是在OP的jsFiddle示例发布之前提交的。请参阅第二个答案，了解对该jsFiddle的回应。

以下是一个如何运作的示例：

Working jsFiddle Demo

<强> HTML：

<div id="someDiv">
    Once upon a midnight dreary
    <br>While I pondered weak and weary
    <br>Over many a quaint and curious
    <br>Volume of forgotten lore.
</div>
Type new text here:<br>
<input type="text" id="replacementtext" />
<input type="button" id="mybutt" value="Swap" />

<input type="hidden" id="vault" />

<强>的javascript / jQuery的：

//Declare persistent vars outside function
var savText, newText, myState = 0;

$('#mybutt').click(function(){
    if (myState==0){
        savText = $('#someDiv').html(); //save poem data from DIV
        newText = $('#replacementtext').val(); //save data from input field
        $('#replacementtext').val(''); //clear input field
        $('#someDiv').html( newText ); //replace poem with insert field data
        myState = 1; //remember swap has been done once
    } else {
        $('#someDiv').html(savText);
        $('#replacementtext').val(newText); //replace contents
        myState = 0;
    }
});

Answer 4

使用您的jsFiddle示例：

jsFiddle很好，但是你在event.preventDefault（）语句的末尾错过了分号。

这有效：Revised jsFiddle

jQuery(document).ready(function() {
    jQuery(".rec1").click(function(event) {
        event.preventDefault();
        jQuery('#rec-box').html(jQuery(this).next().html()); 
    });
    jQuery(".rec2").click(function(event) {
        event.preventDefault();
        jQuery('#rec-box2').html(jQuery(this).next().html()); 
    });
});

Answer 5

第三个答案

对不起，也许我说错了这个时间......

jsFiddle Demo

var savedBox1, savedBox2, state1=0, state2=0;

jQuery(document).ready(function() {
    jQuery(".rec1").click(function() {
        if (state1==0){
            savedBox1 = jQuery('#rec-box').html();
            jQuery('#rec-box').html(jQuery(this).next().html()); 
            state1 = 1;
        }else{
            jQuery('#rec-box').html(savedBox1); 
            state1 = 0;
        }
    });

    jQuery(".rec2").click(function() {
        if (state1==0){
            savedBox2 = jQuery('#rec-box2').html();
            jQuery('#rec-box2').html(jQuery(this).next().html()); 
            state2 = 1;
        }else{
            jQuery('#rec-box2').html(savedBox2); 
            state2 = 0;
        }
    });
});

Answer 6

试试这个：

我认为你想要这样的东西。

<强> HTML：

<div id="1">
    My Content 1
</div>

<div id="2" style="display:none;">
    My Dynamic Content
</div>
<button id="btnClick">Click me!</button>

<强> jQuery的：

$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').show().siblings('div').hide();
}else if($('#2').css('display')!='none'){
    $('#1').show().siblings('div').hide();
}
});

的的jsfiddle：
http://jsfiddle.net/ha6qp7w4/1113/＆lt; ---看到这个我希望你想要这样的东西。

Answer 7

这是一个完整的解决方案，以实现这一目标 -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

替换Div内容onclick

7 个答案: