繁体   English   中英

加载html或div,菜单

[英]load html or div, menu

我需要建议,因为我已经绝望了。 我制作了简单的菜单,并使用a:hover更改了颜色(红色)。 当我单击链接时,我还将类“活动”设置为颜色仍然是红色。 目前,一切进展顺利。 但是我想..当我单击菜单的链接时,只更改了一个(内容页面)。 我知道如何在链接中加载页面或div,但是当特定链接处于活动状态时,我需要在链接周围保持红色。 我尝试了很多解决方案,但没有成功。 如果有人帮助我,我将不胜感激。
链接jsfiddle

HTML:

 <div id="menu">
    <nav>
        <ul>
            <li><a class="active" href="index.html"><b>POČÍTAČE</b></a>
            </li>
            <li><a href="kontaktys.html"><b>TVORBA W</b></a>
            </li>
            <li><a href="#"><b>TISKOVINY</b></a>
            </li>
            <li><a href="#"><b>SLUŽBY</b></a>
            </li>
            <li><a href="#"><b>KONTAKTY</b></a>
            </li>
        </ul>
    </nav>
</div>

CSS:

nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    background: rgb(1, 1, 1);
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    padding: 0 20px;
    border-radius: 0px;
    list-style: none;
    position: relative;
    display: inline-table;
    font-family: Times New Roman;
    font-size: 70%;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
nav ul li {
    float: left;
    font-family: Arial;
    font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
    background: rgb(177, 2, 10);
}
nav ul li:hover a {
    color: rgb(255, 255, 255);
}
nav ul li a {
    display: block;
    padding: 5px 45px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
}
#menu {
    position: relative;
    width: 780px;
    height: 35px;
    left: 50%;
    margin-left: -388px;
    overflow: hidden;
    top: -20px;
}

做这个:

#lol a:hover, #lol a.active, #lol a.visited { 
    background: rgb(177,2,10);
}

#current, #lol a:hover, #lol a.active, #lol a.visited { 
    background: rgb(177,2,10);
}

然后,无论您在哪个页面上,都将current ID放在链接到该页面的锚元素上。

因此,如果您在此页面上:

<li><a href="kontaktys.html"><b>TVORBA W</b></a>

你希望它成为

<li><a  href="kontaktys.html" id="current"><b>TVORBA W</b></a>
a:link {
    color: #FF0000;
}

要么

a:link { }

将 HTML 装入<div></div><div id="text_translate"><p><em><strong>小提琴</strong>: <a href="https://jsfiddle.net/x9ghz1ko/" rel="nofollow noreferrer">https://jsfiddle.net/x9ghz1ko/</a> (带评论。)</em></p><p> 我有一个<strong>HTML 文档</strong>,在这个文档里面,有<strong>两个部分</strong>: &lt;section class="desktop_only"&gt;和&lt;section class="mobile_only"&gt; - 在代码中,在这些部分之前,有一个<strong>脚本</strong>,这个脚本应该<strong>删除两个部分之一</strong>,但问题是:为此,我必须将脚本放在部分之后,但我不能这样做,因为部分内有更多脚本,我必须删除它们在他们跑之前。</p><p> 我的代码的简化版本:(……不工作。) </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script&gt; device = "desktop"; // This could be either: "desktop", or: "mobile" if(device === "desktop"){ document.querySelector(".mobile_only").remove(); // Not doing anything. } else { document.querySelector(".desktop_only").remove(); // Not doing anything. } &lt;/script&gt; &lt;section class="desktop_only"&gt; &lt;script src="example.js"&gt;&lt;/script&gt; &lt;script&gt; console.log("desktop_only") &lt;/script&gt; &lt;div&gt; desktop &lt;/div&gt; &lt;/section&gt; &lt;section class="mobile_only"&gt; &lt;script src="example.js"&gt;&lt;/script&gt; &lt;script&gt; console.log("mobile_only") &lt;/script&gt; &lt;div&gt; mobile (Delete this.) &lt;/div&gt; &lt;/section&gt;</pre></div></div><p></p><p> <strong>也许一种解决方案是:</strong>我有一个空的&lt;div&gt; ,称为".platform_dependent" ,我有两个外部文件,称为: desktop_only.something和mobile_only.something然后我将这些文件的内容加载到: platform_dependent.innerHTML ...但我不知道该怎么做?</p></div>

[英]load HTML into <div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将html加载到div,菜单,开关中 如何通过单击菜单中的Li将HTML页面加载到DIV中? 如何使用Angular在菜单单击上的div内加载HTML? 如何通过单击“ include(&#39;menu.html&#39;)”菜单内的Li来将HTML页面加载到DIV中 HTML滚动到Div菜单 从菜单加载Div,然后单击 在div中加载html,然后将其删除 将 HTML 装入<div></div><div id="text_translate"><p><em><strong>小提琴</strong>: <a href="https://jsfiddle.net/x9ghz1ko/" rel="nofollow noreferrer">https://jsfiddle.net/x9ghz1ko/</a> (带评论。)</em></p><p> 我有一个<strong>HTML 文档</strong>,在这个文档里面,有<strong>两个部分</strong>: &lt;section class="desktop_only"&gt;和&lt;section class="mobile_only"&gt; - 在代码中,在这些部分之前,有一个<strong>脚本</strong>,这个脚本应该<strong>删除两个部分之一</strong>,但问题是:为此,我必须将脚本放在部分之后,但我不能这样做,因为部分内有更多脚本,我必须删除它们在他们跑之前。</p><p> 我的代码的简化版本:(……不工作。) </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script&gt; device = "desktop"; // This could be either: "desktop", or: "mobile" if(device === "desktop"){ document.querySelector(".mobile_only").remove(); // Not doing anything. } else { document.querySelector(".desktop_only").remove(); // Not doing anything. } &lt;/script&gt; &lt;section class="desktop_only"&gt; &lt;script src="example.js"&gt;&lt;/script&gt; &lt;script&gt; console.log("desktop_only") &lt;/script&gt; &lt;div&gt; desktop &lt;/div&gt; &lt;/section&gt; &lt;section class="mobile_only"&gt; &lt;script src="example.js"&gt;&lt;/script&gt; &lt;script&gt; console.log("mobile_only") &lt;/script&gt; &lt;div&gt; mobile (Delete this.) &lt;/div&gt; &lt;/section&gt;</pre></div></div><p></p><p> <strong>也许一种解决方案是:</strong>我有一个空的&lt;div&gt; ,称为".platform_dependent" ,我有两个外部文件,称为: desktop_only.something和mobile_only.something然后我将这些文件的内容加载到: platform_dependent.innerHTML ...但我不知道该怎么做?</p></div> 将html链接加载到div中 如何通过单击菜单中的Li将HTML页面从href加载到div中?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM