-1

我正在为标签使用 Jquery UI 。在每个选项卡中，我都有一个空 div。我在选项卡之外有一个文本区域，我在其中提供值以存储在那些空的 div 中。

问题是我已将值固定为“Null”，以便在选项卡之间切换时可以刷新 textarea。

但问题是当我们切换到上一个选项卡时，我必须保留选项卡的值并将其显示在文本区域中。

我使用了脚本

$(function() {
    $( "#tabs" ).tabs();
});
$(function() {
  $("#t1").unbind("click").click(function()
    {
    $('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
        {
    $('#tab1').text('').append($("#custom_text").val()); 
    });
});
  });
 $(function() {
  $("#t2").unbind("click").click(function()
    {
$('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
   {
    $('#tab2').text('').append($("#custom_text").val()); 

    });
});
  });
$(function() {
$("#t3").unbind("click").click(function()
    {
$('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
    {
    $('#tab3').text('').append($("#custom_text").val()); 

        });
});
});

我的 HTML 是

<div id="tabs">
<ul>
    <li id="t1"><a href="#tabs-1">TAB 1</a></li>
    <li id="t2"><a href="#tabs-2">TAB 2</a></li>
    <li id="t3"><a href="#tabs-3">TAB 3</a></li>
</ul>
<div id="tabs-1">
    <p>TAB 1 CONTENT</p>
  <div id="tab1"></div>
</div>
<div id="tabs-2">
    <p>TAB 2 CONTENT</p>
   <div id="tab2"></div>
</div>
<div id="tabs-3">
    <p>TAB 3 CONTENT</p>
   <div id="tab3"></div>
</div>


</div>
<textarea id="custom_text" rows="5" cols="30"></textarea>

我做了一个BIN。请帮助我在程序中出错的地方

4

2 回答 2

1

$(document).ready您的 jQuery 函数中似乎缺少您。而且您还需要提供 $("#t1").ready(function() 因为 t1 是默认选项卡，无需单击即可呈现。因此，script像这样修改您的部分：

<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
    <script>
    $(document).ready(function(){
        $( "#tabs" ).tabs();

        $("#t1").ready(function()
        {
            $('#custom_text').val("");
            $("#custom_text").unbind("keyup").keyup(function()
            {
                $('#tab1').text('').append($("#custom_text").val()); 
            });
        });

        $("#t1").unbind("click").click(function()
        {
            $('#custom_text').val("");
            $("#custom_text").unbind("keyup").keyup(function()
            {
                $('#tab1').text('').append($("#custom_text").val()); 
            });
        });

        $("#t2").unbind("click").click(function()
        {
            $('#custom_text').val("");
            $("#custom_text").unbind("keyup").keyup(function()
            {
                $('#tab2').text('').append($("#custom_text").val()); 
            });
        });

        $("#t3").unbind("click").click(function()
        {
            $('#custom_text').val("");
            $("#custom_text").unbind("keyup").keyup(function()
            {
                $('#tab3').text('').append($("#custom_text").val()); 
            });
        });
    });
    </script>
</head>
于 2012-12-26T09:38:24.653 回答
1

如果我做对了，您希望使用之前输入的选项卡的值填充 textarea。如果是这样，请替换行

$('#custom_text').val("");

和

$('#custom_text').val($("#tab1").text());

并为所有选项卡执行此操作。

于 2012-12-26T09:22:34.080 回答