点击它们后如何进入子菜单的标题？ /如何从其他页面转到子菜单的标题？ [英] How do I go to my sub menu's headings when I click on them? / How can I go to sub menu's headings from other pages?

问题描述

你好。



当我点击子菜单时，我想知道如何进入我的特定标题。如果我在具有子菜单（theme.html）的页面上，并且我点击任何子菜单标题，它什么都不做。当我从其他任何页面（index.html，contact.html等）点击子菜单标题时，我可以转到theme.html页面，但我无法转到我点击的SPECIFIC标题。相反，我最终只是在theme.html页面的顶部。



当我点击子菜单标题时，我应该更改什么（CSS / HTML）我将转到我的theme.html页面上的特定标题？



这是我的theme.html页面的图片和子菜单的标题和标题页面本身。



[IMG] http://i68.tinypic.com/4jnn6f.jpg [/ IMG]



此外，这里是theme.html导航的HTML代码：

Hello.

I would like to know how I can go to my specific headings when I click on the sub menu. If I am on the page that has the sub menu (theme.html) and I click on any of the sub menu headings, it does nothing. When I click on the sub menu heading from any other of my pages (index.html, contact.html,etc.), I can go to the theme.html page, but I cannot go to the SPECIFIC heading that I clicked on. Instead, I just end up at the top of theme.html page.

What do I change(CSS/HTML) so that when I click on a sub menu heading that I will go to that specific heading on my theme.html page?

Here is a pic of my theme.html page and the sub menu's headings and the headings on the page itself.

[IMG]http://i68.tinypic.com/4jnn6f.jpg[/IMG]

Also, here is the HTML code for the theme.html navigation:

<div class="site-container">
  <div class="menu">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li class="has-child">
          <a href="theme.html">Theme/Genre</a>
          <ul>
            <li><a href="#Horror">Horror</a></li>
            <li><a href="#Sci-Fi">Sci-Fi</a></li>
            <li><a href="#Survival">Survival</a></li>
            <li><a href="#Pirate">Pirate</a></li>
            <li><a href="#RPG">RPG/Fantasy</a></li>
            <li><a href="#Space">Space</a></li>
            <li><a href="#Apocalypse">Nuclear Apocalypse</a></li>
         </ul>
        </li>
        <li><a href="top.html">Top Solo Games of 2017</a></li>
        <li><a href="variants.html">Variants</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
  </div>

和导航CSS：

And the CSS for navigation:

.site-container {position: relative;}

.menu {position: fixed;
       top: 30;
       left: 0;
       z-index: 2;
       width: 200px;}

.menu ul {
  padding: 0;
  background: #C5C5C5;
  margin-top: 0;
  list-style: none;
}

.menu ul li a {
  display: block;
  padding: 5px;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.menu ul li a:hover {
  color: white;
}

.menu ul li.has-child {
  background: #5B5B5B;
  position: relative;
}

.menu ul li.has-child ul {
  display: none;
  background: #8E8E8E;
  position: absolute;
  left: 100%;
  top: 0;
  }

.menu ul li.has-child:hover ul{
  display: block;
}

main {
  padding-left: 210px;
  padding-right: 10px;
}

main h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.theme-item {
  border: 4px solid black;
  padding: 20px;
  margin-bottom: 50px;
}

.theme-title {
  z-index: 1;
  position: relative;
  margin-bottom: 40px;
}

.theme-title:before {
  position: absolute;
  content: '';
  display: block;
  width: 80%;
  height: 3px;
  background: black;
  top: calc(100% + 10px);
  left: 0;
}

.games-list {
  padding: 0;
  list-style: none;
}

.games-list .game {
  width: 100%;
  margin-bottom: 30px;
}

/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {content: '';
                         display: table;
                         clear: both;}

.games-list .game img {float: left;}

.games-list .game .description {float: left; 
                                padding-left: 15px;}

什么我试过了：



我试过在很多论坛上看过ncerning子菜单，但找不到与我的具体问题有关的任何答案。

What I have tried:

I have tried looking in many forums concerning sub menus but could not find any answers relating to my specific problem.

推荐答案

你需要一个像< a name =Pirate>这样的锚。在页面上您希望该链接转到的位置。



但请注意：您设置该菜单的方式，只有在浏览器中才有效已经在Theme.html页面上，但无论使用哪个菜单，这些子点都会显示。



您可能要考虑使用Theme.html＃Pirate （等）用于子链接。

You need an anchor like <a name="Pirate"> at the point on the page you want that link to go to.

Note, however: the way you have that menu set up, it will only work if the browser is on the Theme.html page already, but those sub points will be visible wherever that menu is used.

You might want to consider using "Theme.html#Pirate" (etc) for the sub links.

感谢GenJerDan。



我试过

Thanks GenJerDan.

I tried the

<a Pirate="Pirate">

。然而，它仍然无法正常工作。



当你点击子菜单时，我测试了尝试转到我页面上相应子目录标题的不同方法。我终于通过在子菜单中创建

for my sub-directories in my theme.html page. However, it still did not work.

I tested different ways of trying to go to the appropriate sub-directory heading on my page when you click in the sub-menu. I finally figured it out by creating

<li><a href="#Pirate">Pirate</a></li>

来弄明白了并为我的子目录标题创建一个ID＃

in the sub-menu and create an id#

<h2 id="Pirate" class="theme-title">Pirate</h2>

。它完美无缺，我也可以在theme.html页面以及不同的页面中链接！



再次感谢。

for EACH of my sub-directory headings. It works perfectly and I can link within theme.html page as well as from different pages too!

Thanks again.

这篇关于点击它们后如何进入子菜单的标题？ /如何从其他页面转到子菜单的标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！