3

この簡単な例を使用して、2 番目のタブへのアクセスを禁止します。false を返すと問題なく動作しますが、最初にどのタブを選択するかを確認する必要があります。ui パラメーターはオブジェクト、alert(ui) ですが、ui 変数または関数を使用できません。オブジェクトを何かにキャストする必要がありますか?

<!doctype html>
<html lang="de">
<head>
    <meta  http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>tabs demo</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="libraries/jquery-1.8.3.js"></script>
    <script src="libraries/jquery-ui.js"></script>
</head>
<body>

<div id="tabs" style="position:absolute;top:0px;left:0px;width:800px;height:600px">
    <ul>
        <li><a href="#fragment-1"><span>Überblick</span></a></li>
        <li><a href="#fragment-2"><span>System</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$( "#tabs" ).tabs(); </code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
    </div>
</div>

<script>

$(function() {
   $( "#tabs" ).tabs({

        beforeActivate: function( event, ui ) { alert( ui.newTab.id ); }
    });
});


</script>

</body>
</html>
4

2 に答える 2

2

タブを無効にしてみませんか。

disable( インデックス )

タブを無効にします。選択したタブを無効にすることはできません。一度に複数のタブを無効にするには、disabled オプションを設定します: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )。

http://api.jqueryui.com/tabs/#method-disable

ユーザーに信じ込ませて、要素をクリックできるのに、実際にはクリックできないのは、悪い UI デザインです!

于 2012-11-29T14:12:37.833 に答える
1

これを試して：

$("#tabs").tabs({

    beforeActivate: function(event, ui) {
        alert(ui.newTab.find("a").attr("href"));
        return false;
    }
});​
于 2012-11-29T14:18:08.913 に答える