Question

我正在使用index.html来包含JavaScript，例如jQuery和Bootstrap。此外，Elm-Application被注入body - 节点。然后由榆树制作整个视图。

在新的内部有一个Bootstrap导航，其中应包含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>

我的（缩短的）Elm-app：

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 )

最后，在启动网站时，只有h li的{{1}}才会突出显示，无论如何。

Answer 1

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

<!DOCTYPE html>而不只是<html>为我修复了它！感谢Curt和他在这里的回答：https://stackoverflow.com/a/36348841/3686898

Bootstrap Scrollspy无法使用Elm

1 个答案: