Question

我在这里需要帮助。

我想向div显示动态内容。我已经有了以下代码：

<script type="text/javascript"><!--
  function ReplaceContentInContainer(id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;
}
//--></script>

<div id="example1div" style="padding:10px; text-align:left;">
    <p>Content 1</p>
</div>

<p align="center"><a href="javascript:ReplaceContentInContainer('example1div','<p>Content 2</p>')">View another</a></p>

它的作用是，当点击“查看另一个”时，它将“内容1”替换为“内容2”，但我想要的是，当“内容2”已经显示时，我想点击“再次查看另一个“链接”并使用“内容3”等新内容再次替换div内容。

任何人都可以帮我解决这个问题。

提前致谢：）

Answer 1

OP发表评论后更新

<强> HTML

包含jQuery库文件

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

使用插件https://github.com/fkling/jQuery-Function-Toggle-Plugin - ＆gt;它接受任意数量的函数，可用于任何事件。

DEMO

你想要这样的东西。

<script type="text/javascript">
/*
 * jQuery Function Toggle Pluing
 * Copyright 2011, Felix Kling
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */

(function ($) {
    $.fn.funcToggle = function (type, data) {
        var dname = "jqp_eventtoggle_" + type + (new Date()).getTime(),
            funcs = Array.prototype.slice.call(arguments, 2),
            numFuncs = funcs.length,
            empty = function () {},
            false_handler = function () {
                return false;
            };

        if (typeof type === "object") {
            for (var key in type) {
                $.fn.funcToggle.apply(this, [key].concat(type[key]));
            }
            return this;
        }
        if ($.isFunction(data) || data === false) {
            funcs = [data].concat(funcs);
            numFuncs += 1;
            data = undefined;
        }

        funcs = $.map(funcs, function (func) {
            if (func === false) {
                return false_handler;
            }
            if (!$.isFunction(func)) {
                return empty;
            }
            return func;
        });

        this.data(dname, 0);
        this.bind(type, data, function (event) {
            var data = $(this).data(),
                index = data[dname];
            funcs[index].call(this, event);
            data[dname] = (index + 1) % numFuncs;
        });
        return this;
    };
}(jQuery));

$('#chnage_p').funcToggle('click', function () {
    $('#example1div').text('Content 1');
}, function () {
    $('#example1div').text('Content 2');
}, function () {
    $('#example1div').text('Content 3');
}, function () {
    $('#example1div').text('Content 4');
});
</script>

动态Div内容，只需单击一个链接/按钮即可

1 个答案: