gpt4 book ai didi

javascript - polymer 开关页面

转载 作者:行者123 更新时间:2023-11-30 12:40:42 25 4
gpt4 key购买 nike

我正在尝试建立一个网站来学习 polymer 。我正在使用核心抽屉面板和核心标题面板。现在,我希望在单击抽屉中的某个链接时更改内容。我想知道,最好的方法是什么?是否有内置的页面切换功能? (不使用制表符)

到目前为止,这是我的代码:

<body fullbleed vertical layout unresolved touch-action="auto">

<core-drawer-panel id="drawerPanel">

<core-header-panel drawer id="drawer">
<core-toolbar id="navheader">
<span id="menutitle">Menu</span>
</core-toolbar>
<core-menu id='menu'>
<paper-item class="menulink" id='homelink' label="Home"></paper-item>
<paper-item class="menulink" id='gallerylink' label="Gallery"></paper-item>
<paper-item class="menulink" id='calendarlink' label="Calendar"></paper-item>
<paper-item class="menulink" id='contactlink' label="Contact"></paper-item>
</core-menu>
</core-header-panel>

<core-header-panel main mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button
id="navicon" icon="menu"></paper-icon-button>
<span flex id="title">My site</span>
</core-toolbar>
<div class="content">
<div id="home" vertical layout centered>
<big-picture flex></big-picture>
<general-info flex></general-info>
<footer-element flex></footer-element>
</div>
<div id='gallery' vertical layout centered>
</div>
</div>
</core-header-panel>

</core-drawer-panel>

<script>
</script>
</body>

最佳答案

在我看来, polymer 文档页面对新手的解释很差,所以只发送一个链接有点懒。

不要使用 div id 来更改页面,而是像这样尝试:

<div class="content">
<core-animated-pages selected="0">
<section>
<div>Home page contents</div>
</section>
<section>
<div>Gallery contents</div>
</section>
</core-animated-pages>
</div>

在下面添加一些javascript来在点击时改变页面

function home(){
//find <core-animated-pages>
var c = document.querySelector('core-animated-pages');
//set the selected value to 0 (first <section>)
c.selected = 0;
}

function gallery(){
//find <core-animated-pages>
var c = document.querySelector('core-animated-pages');
//set the selected value to 1 (second <section>)
c.selected = 1;
}

现在为每一个paper-item按钮,添加一个onclick来调用每一个函数来改变页面

<paper-item onclick="gallery();">Gallery</paper-item>

有更有效的方法来更改页面,但这应该让您了解它是如何工作的。不要忘记导入您的元素!

关于javascript - polymer 开关页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24559258/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com