Question

我正在为标签使用Jquery UI。在每个标签中我都有一个空div。我在标签之外有一个textarea，我在其中给出了存储在那些空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。请帮助我在程序中出错的地方

Answer 1

如果我做对了，你希望textarea填充之前输入的标签的值。如果是，请替换

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

带

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

并为所有标签执行此操作。

Answer 2

您的jQuery函数中似乎缺少$(document).ready。而且你需要提供$（“＃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>

如何通过val（）从div获取文本

2 个答案: