3

セマンティックUIタブコントロールを使用して、セマンティックUIでタブコントロールを使用するでいくつかの答えを見つけました

私はセマンティックUIからパッケージをダウンロードし、feed.htmlを開いて以下を修正しました:

<body id="feed">
        <div class="ui secondary pointing menu">
        <a class="active item">
            <i class="home icon"></i>Home</a>
        <a class="item">
            <i class="mail icon"></i>Messages</a>
        <a class="item">
            <i class="user icon"></i>Friends</a>

    </div>
    </body>

そしてそれは機能していませんでした

セマンティック ui でのタブ コントロールの使用で見つけたものを使用して、次のように変更しました。

<div class="ui secondary pointing menu">
        <a class="active item">
            <i class="home icon"></i>Home</a>
        <a class="item">
            <i class="mail icon"></i>Messages</a>
        <a class="item">
            <i class="user icon"></i>Friends</a>

    </div>

http://jsfiddle.net/d93af/19/

誰かがセマンティックUIを適切に使用する方法を教えてもらえますか?

また、bootstrap: http://getbootstrap.com/javascriptのようなページはあり ますか?ここでは、説明するだけでなく、サンプル コードも示していますか?

私はセマンティックUIサイトでそのような情報を見つけることができません.

助けてくれてありがとう！

4

3 に答える 3

7

.on('click') を使用して、クラスをアクティブに変更できます。

http://jsfiddle.net/d93af/22/

$(document).ready(function(){
   $('.ui .item').on('click', function() {
      $('.ui .item').removeClass('active');
      $(this).addClass('active');
   });             
});
于 2014-05-02T13:27:57.523 に答える
7

jQueryで開始する必要があります これが実際の例です

<div class="ui grid page">
    <div class="column">
        <div class="ui pointing secondary menu" id="tabsTwo">
            <a class="active red item" data-tab="first">One</a>
            <a class="blue item" data-tab="second">Two</a>
            <a class="green item" data-tab="third">Three</a>
        </div>
        <div class="ui active tab segment" data-tab="first">First</div>
        <div class="ui tab segment" data-tab="second">Second</div>
        <div class="ui tab segment" data-tab="third">Third</div>
    </div>
</div>

そして、このスクリプトを使用して開始します

$('.menu .item').tab();
于 2016-05-31T09:25:35.450 に答える