Twitter bootstrap 引导Scrollspy不使用Elm_Twitter Bootstrap_Elm_Scrollspy

Twitter bootstrap 引导Scrollspy不使用Elm

twitter-bootstrap elm

Twitter bootstrap 引导Scrollspy不使用Elm,twitter-bootstrap,elm,scrollspy,Twitter Bootstrap,Elm,Scrollspy,我正在使用index.html来包含JavaScript，比如jQuery和Bootstrap。另外，Elm应用程序被注入到主体-节点中。然后，整个视图由Elm生成在新版本中，有一个引导导航，它应该包括scrollspy功能。这只是部分工作，因为只有最后一个可能的目标得到突出显示，无论我在网站上的位置以下是index.html： <html> <head> <title>Elm-Application</title> &l

我正在使用

index.html

来包含JavaScript，比如jQuery和Bootstrap。另外，Elm应用程序被注入到

主体

-节点中。然后，整个视图由Elm生成

在新版本中，有一个引导导航，它应该包括scrollspy功能。这只是部分工作，因为只有最后一个可能的目标得到突出显示，无论我在网站上的位置

以下是index.html：

<html>
  <head>
    <title>Elm-Application</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <!-- jQuery -->

    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <script src="js/classie.js"></script>

    <script src="js/cbpAnimatedHeader.js"></script>

    <script type="text/javascript" src="elm.js"></script>
  </head>

  <body id="page-top" class="index" data-spy="scroll" data-target=".navbar-fixed-top">
  </body>



  <script type="text/javascript">
    var elmApp = document.getElementById('page-top');
    app = Elm.Main.embed(elmApp,
      // The initial Model
      { location: "#"
      , width: window.innerWidth - 15
      , height: window.innerHeight
      , async_content: ""
    });
  </script>
</html>

最后，在启动网站时，无论发生什么情况，只有href为

#contact

的

li

会突出显示。

问题不在于Elm代码，而在于HTML代码。我一开始就忘了

doctype

声明

而不仅仅是

为我修复了它！感谢Curt和他的回答：

view =
    div []
        [ nav [ class "navbar navbar-default navbar-fixed-top" ]
            [ div [ class "container" ]
                [ div [ class "navbar-header page-scroll" ]
                    [ button [ class "navbar-toggle", attribute "data-target" "#bs-example-navbar-collapse-1", attribute "data-toggle" "collapse", type' "button" ]
                        [ span [ class "sr-only" ]
                            [ text "Toggle navigation" ]
                        , span [ class "icon-bar" ]
                            []
                        , span [ class "icon-bar" ]
                            []
                        , span [ class "icon-bar" ]
                            []
                        ]
                    , a [ class "navbar-brand page-scroll", href "#page-top", onClick (Update.ClickedElem "#page-top") ]
                        [ text "Start Bootstrap" ]
                    ]
                , div [ class "collapse navbar-collapse", id "bs-example-navbar-collapse-1" ]
                    [ ul [ class "nav navbar-nav navbar-right" ]
                        [ li [ class "hidden" ]
                            [ a [ href "#page-top" ]
                                []
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#services", onClick (Update.ClickedElem "#services") ]
                                [ text "Services" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#portfolio", onClick (Update.ClickedElem "#portfolio") ]
                                [ text "Portfolio" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#about", onClick (Update.ClickedElem "#about") ]
                                [ text "About" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#team", onClick (Update.ClickedElem "#team") ]
                                [ text "Team" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#contact", onClick (Update.ClickedElem "#contact") ]
                                [ text "Contact" ]
                            ]
                        ]
                    ]
                , text "  "
                ]
            ]
        , section [ id "contact" ]
            [-- More content
            ]
          -- Much more content
        , section [ id "contact" ]
            [-- More content
            ]
        ]


type alias Model =
    { location : String
    , height : Int
    , width : Int
    , async_content : String
    }


type Msg
    = ClickedElem String

update : Msg -> Model -> ( Model, Cmd.Cmd Msg )
update msg model =
    case msg of
        _ ->
            ( model, Cmd.none )