-1

タブにJqueryUIを使用しています。各タブには空のdivがあります。タブの外側にテキストエリアがあり、空のdivに格納する値を指定します。

問題は、タブを切り替えたときにテキストエリアを更新できるように、値を「Null」に修正したことです。

しかし、問題は、前のタブに変更したときに、タブの値を保持してテキスト領域に表示する必要があることです。

スクリプトを使用しました

$(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

これが正しければ、前に入力したタブの値をテキストエリアに入力する必要があります。もしそうなら、ラインを交換してください

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

と

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

すべてのタブに対してこれを行います。

于 2012-12-26T09:22:34.080 に答える
1

$(document).readyjQuery関数が欠落しているようです。また、t1はクリックなしでレンダリングされるデフォルトのタブであるため、$（ "＃t1"）。ready（function（）を指定する必要があります。したがって、次のように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 に答える