Question

我想在Elm中显示引导标签。选项卡使用以下代码显示OK，但单击它们无效。我怀疑榆树短路Bootstrap的Javascript或其他东西。我想我可以使用Elm架构来实现相同的效果，在点击它们时更新标签，但我找到的所有示例都包含按钮和放大器。形式。

这是我使用的代码：

test_tab : List Html.Html
test_tab = [
              ul [class "nav nav-tabs"]
                 [
                  li [][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#home")]  [Html.text "Home"]]
                 ,li [class "active"][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#menu1")] [Html.text "Menu 1"]]
                 ,li [][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#menu2")] [Html.text "Menu 2"]]
                 ]
            ,div [class "tab-content"]
                 [
                   div [id "home", class "tab-pane fade"]
                       [h3 [][Html.text "HOME"], Html.text "Some content in home"]
                  ,div [id "menu1", class "tab-pane fade in active"]
                       [h3 [][Html.text "Menu 1"], Html.text "Some content in mffenu 1"]
                  ,div [id "menu2", class "tab-pane fade"]
                       [h3 [][Html.text "Menu 2"], Html.text "Some content in menu 2"]
                 ]
           ]

Answer 1

不知道你是否弄清楚了。如果没有，我认为通常你会通过榆树更新国家。

module Main where

import Signal exposing(Mailbox)
import Html exposing(..)
import Html.Attributes exposing(..)
import Html.Events exposing(..)

-- model, update, etc. -------------------------

type Actions = NoOp | SetActive String

mailbox = Signal.mailbox NoOp

update action model  =
  case action of
    NoOp            -> model
    SetActive name  -> name

isActive model tabname =
  tabname == model

-- view ---------------------------------------

test_tabs address model = 
  let 
      isTabActive = isActive model
  in
     tablist [
       tab address "Home" isTabActive,
       tab address "About" isTabActive,
       tab address "Other" isTabActive
       ]

tablist tabs = ul [class "nav nav-tabs"] tabs

tab address name isTabActive = 
  let
      make_active = SetActive name
      isActiveTab = isTabActive name 
      classes = if isActiveTab then "active" else ""
  in
     li [class classes] [ a [href "#", onClick address make_active] [text name] ]

-- main ---------------------------------------

init = Signal.foldp update "Home" mailbox.signal

main =
  Signal.map (test_tabs mailbox.address) init

使用Elm中的链接更新视图

1 个答案: