【摘要】 介绍页面元素设置跳转链接的方法及总结。

首先要清楚一点，页面上的所有元素控件都是可以自行增、删、改的。如果遇到页面控件点击后无法正常跳转的，

应该去检查一下该控件的跳转链接有没有维护对。下边介绍一下怎么去检查控件的跳转链接及维护方法。

1      确认页面控件类型 1.1      进入站点编辑界面

登录控制台-后台管理-站点编辑

1.2      确认控件类型

在编辑界面，把鼠标移至控件，控件的四周会出现虚线，且在控件的左上角处显示该控件的类型

（如果控件处于页面顶端，则控件类型会显示在控件的左下角），如下

2      维护控件的跳转链接

确认控件类型后，可以在帮助中心搜该控件的指导文档。这里我以几个常用到的控件为例，演示怎么维护控件的链接，

所有控件的跳转链接维护方式都是一样的，学会几个其他的自然就知道怎么设置了。

2.1      导航栏链接

导航栏有点特殊，因为导航栏自身也分了几个类型。如果控件是导航栏，需要进一步确认是哪种类型的导航栏

点击导航栏控件，弹出导航栏的设置菜单栏

点击导航类型菜单，就可以看到当前导航栏的类型了

 

2.1.1        默认页面类型

如果是默认页面类型的导航栏，这个导航栏和网站的页面有关，不用单独设置跳转链接。

只要确认一下导航菜单项是否有对应的页面且页面是导航可见的即可。

点击页面管理，显示当前网站拥有的页面，把鼠标移到页面名称中时，页面的后面会出现一排菜单，

其中眼睛状的图标决定的是改页面是否显示在导航栏中（眼睛睁开：显示），可以直接单击眼睛图标关闭显示。

这里，产品详情页及demo2眼睛是闭合的，所以导航栏中没有此二项

回到跳转上边，这是如果点击导航中的产品展示，就会跳转到产品展示页面。所以说如果导航是默认页面类型的，

觉得跳转后的页面内容有问题，要找对应的页面查问题。

2.1.2        自定义类型

如果是自定义类型的导航栏，菜单的跳转就需要自行维护了。

点击菜单编辑，输入菜单名称，添加菜单的跳转链接。链接看各自需求，可以维护8种跳转，这里以跳转到首页为例。

可以预览，点击导航测试菜单，跳转到了首页（注意预览前先保存）

2.1.3        超大屏导航类型

如果是超大屏导航类型的导航栏，菜单的跳转也需要自行维护。

点击菜单编辑，输入菜单名称，添加菜单的跳转链接。链接看各自需求，可以维护8种跳转，这里以跳转到首页为例。

注意这里添加的菜单链接对应的是1处输入菜单，即维护后，点击导航栏的超大屏导航测试菜单时，跳转到网站首页。

2中选择的菜单样式，下边会出现对应的菜单内容，菜单内容里边如果需要跳转是要另行维护的。

点击菜单内容编辑菜单中的HTML图标

提供的7个样式里边的菜单内容链接都是空的，需要替换为有效的链接

2.2      插件-产品链接

产品插件的使用，这里要提醒一点，和其他的网站一样，

点击产品分类——–展示该分类的产品

点击产品———展示该产品的详情

所以产品分类应该是跳转到产品列表，产品列表应该是跳转到产品详情。

2.2.1        产品分类链接

添加产品分类链接前，应该确保存在一个有着产品列表插件的页面，一般我们都把这个页面叫做产品列表页。

在页面中添加一个产品分类插件

选中产品分类，设置跳转链接。我的网站现在有三个页面里边存在产品列表插件，所以这里可以看到下拉框中有三个可选的页面，

选择产品列表页

预览效果：

点击智能交通

因为跳转链接那里选择的产品列表页，所以点击后，跳转到产品列表页，显示的是智能交通的产品。

2.2.2        产品列表链接

点击产品列表内的产品，跳转到产品详情处，所以在添加产品列表的跳转链接前，确保存在一个有着产品详情插件的页面。

一般我们把这个页面叫做产品详情页。

在2.2.1中，我们维护了一个产品列表页，里边有产品列表插件了。

我们切换到产品列表页

点击选中产品列表插件，在样式设置中，找到参数设置-链接设置。详情链接处选择刚才维护的产品详情页。

预览效果：

点击列表中的任意一个产品

显示该产品的详情。这里展示的就是产品详情页了，所以如果觉得产品详情这里页面太单调，需要加点其他内容，应该去修改产品详情页。

2.3      图片链接

选中图片，在属性中设置链接。

这里我把链接设置为跳转到网站首页，所以效果就是点击这张图片，会跳转到网站首页。

2.4      文本链接

首先，需要选中文本内需要设置跳转链接的文本，点击编辑菜单中的添加超链接按钮，选中跳转链接

这里我依然选中的是跳转到网站首页，所以效果是点击这串文本会跳转到网站首页。

2.5      图片特效插件-Jslider链接

在设置中，添加图片后，图片下方有维护链接的图标，点击添加链接

上图中第一个图片我选择跳转到网站首页，保存后效果就是点击这张图片后会跳转到网站首页。

3     总结

1、  页面控件如果点击没有发生跳转，首先应该去看该控件有没有设置跳转链接。

2、  页面控件点击后跳转的页面不对，应该去检查该控件设置的链接是不是正确的，如果链接没问题，则去检查一下该链接对应的页面是否符合自己的需求。

3、  所有可以维护跳转的页面控件，都可以单击选中该控件，然后在该控件的设置菜单中寻找设置链接的地方。大部分控件的链接设置是在“设置”、“样式设置”、“属性”、“样式”这几个菜单中。

4、  产品列表页和产品详情页是全部产品通用的，不用每个类别的产品都维护一个对应的列表页和详情页。维护好链接后，当点击产品分类时，系统自动会跳转到产品列表页并列出该分类的产品；当点击产品列表中的产品时，系统自动会跳转到产品详情页并展示该产品的详情信息。

4      其他问题 4.1      单击不能选中页面的控件

这种情况，我们可以明显看到，上面红框的页面控件颜色都比较暗淡，不像下边的图片控件一样高亮。

这是因为上边的logo、导航栏等都是从底版继承过来的，所以在页面中会显得暗淡一些，这是为了区分从底版继承过来的内容和页面中添加的内容。

这时，我们如果要维护logo的链接，则需要去该底版中添加维护了。

查找该页面使用的底版

云速建站之维护页面控件跳转.pdf

来源：华为云社区  作者：建站小哥