diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index dbecd4a9..d21648f7 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb class="breadcrumb-container" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search class="right-menu-item header-search" />
+        <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
 
-        <screenfull class="right-menu-item hover-effect screenfull" />
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select class="right-menu-item hover-effect size-select" />
+          <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
       </template>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 7596865d..f71d9dbe 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-view-container">
+  <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper">
       <router-link
         v-for="tag in visitedViews"
diff --git a/src/views/guide/defineSteps.js b/src/views/guide/defineSteps.js
index b541bc8b..283c672e 100644
--- a/src/views/guide/defineSteps.js
+++ b/src/views/guide/defineSteps.js
@@ -1,6 +1,6 @@
 const steps = [
   {
-    element: '.hamburger-container',
+    element: '#hamburger-container',
     popover: {
       title: 'Hamburger',
       description: 'Open && Close sidebar',
@@ -8,7 +8,7 @@ const steps = [
     }
   },
   {
-    element: '.breadcrumb-container',
+    element: '#breadcrumb-container',
     popover: {
       title: 'Breadcrumb',
       description: 'Indicate the current page location',
@@ -16,7 +16,7 @@ const steps = [
     }
   },
   {
-    element: '.header-search',
+    element: '#header-search',
     popover: {
       title: 'Page Search',
       description: 'Page search, quick navigation',
@@ -24,7 +24,7 @@ const steps = [
     }
   },
   {
-    element: '.screenfull',
+    element: '#screenfull',
     popover: {
       title: 'Screenfull',
       description: 'Set the page into fullscreen',
@@ -32,7 +32,7 @@ const steps = [
     }
   },
   {
-    element: '.size-select',
+    element: '#size-select',
     popover: {
       title: 'Switch Size',
       description: 'Switch the system size',
@@ -40,7 +40,7 @@ const steps = [
     }
   },
   {
-    element: '.tags-view-container',
+    element: '#tags-view-container',
     popover: {
       title: 'Tags view',
       description: 'The history of the page you visited',