Html 单击并更改div的内容时,使CSS按钮处于活动状态。

Html 单击并更改div的内容时,使CSS按钮处于活动状态。,html,css,Html,Css,我想要的结果是有一个菜单css按钮,当点击它时,更改div的内容,。。。我当然设法做到了。。。 问题是: 每当我点击2nd或3rd按钮/链接时,它都会设法更改div内容,但当您开始点击页面中的任意位置时,它会更改回其默认内容。。。 我想使按钮/链接和div内容都保持活动状态,即使在我单击页面中的任何位置。 我只想在纯CSS中实现这一点。我知道这是有一个代码的,尽管我还不够好,无法实现它。有人能帮我解决这个问题吗 这是我的HTML代码看起来像 视频 应用程序 音乐 这里有视频内容 这里有视频内

我想要的结果是有一个菜单css按钮,当点击它时,更改div的内容,。。。我当然设法做到了。。。 问题是: 每当我点击2nd3rd按钮/链接时,它都会设法更改div内容,但当您开始点击页面中的任意位置时,它会更改回其默认内容。。。 我想使按钮/链接和div内容都保持活动状态,即使在我单击页面中的任何位置。 我只想在纯CSS中实现这一点。我知道这是有一个代码的,尽管我还不够好,无法实现它。有人能帮我解决这个问题吗

这是我的HTML代码看起来像

视频
应用程序
音乐
这里有视频内容
这里有视频内容
应用程序内容在此
音乐内容在这里

就操作而言,您确实可以为CSS做任何事情。CSS只是样式

您需要使用一些javascript来处理这些操作

Javascript与DOM交互以在浏览器中更改语法


但是,您可以使用CSS属性(如过渡、变换、:悬停、:活动、:焦点和@key frames)对动画等操作进行有限的控制。

就操作而言,您确实可以为CSS做任何事情。CSS只是样式

您需要使用一些javascript来处理这些操作

Javascript与DOM交互以在浏览器中更改语法


但是,您可以使用CSS属性(如过渡、变换、:悬停、:活动、:焦点和@key frames)对动画等内容进行有限的控制。

只要单击其他位置,链接就会失去焦点。您需要使用一些能够保持状态的东西:checked伪元素非常适合。您可以隐藏输入并使用标签管理其状态。以下是应用了更改的代码:

<div id="mynavtabcontent">

  <input type="radio" name="content-toggle" id="video"> <label for="video" tabindex="1">Video</label>
  <input type="radio" name="content-toggle" id="apps"> <label for="apps" tabindex="2">Apps</label>
  <input type="radio" name="content-toggle" id="music"> <label for="music" tabindex="3">Music</label>

  <div id="content">
    <div id="def">Video Content here</div>
    <div id="videocontent">Video Content here</div>
    <div id="appscontent">Apps Content here</div>
    <div id="musiccontent">Music Content here</div>
  </div>

</div>

一旦你点击其他地方,你的链接就会失去焦点。您需要使用一些能够保持状态的东西:checked伪元素非常适合。您可以隐藏输入并使用标签管理其状态。以下是应用了更改的代码:

<div id="mynavtabcontent">

  <input type="radio" name="content-toggle" id="video"> <label for="video" tabindex="1">Video</label>
  <input type="radio" name="content-toggle" id="apps"> <label for="apps" tabindex="2">Apps</label>
  <input type="radio" name="content-toggle" id="music"> <label for="music" tabindex="3">Music</label>

  <div id="content">
    <div id="def">Video Content here</div>
    <div id="videocontent">Video Content here</div>
    <div id="appscontent">Apps Content here</div>
    <div id="musiccontent">Music Content here</div>
  </div>

</div>

我明白了,所以真的没有别的办法。。。我之所以避免使用Java,是因为我不知道如何使用它。Java和javascript是完全不同的语言。我明白了,所以真的没有其他方法。。。我之所以避免使用Java,是因为我不知道如何使用它。Java和javascript是完全不同的语言。我将。。。谢谢=D直到我有了15个名声,我才来到这里!啊哈,好的。提前发送Thx,欢迎!:)我会的。。。谢谢=D直到我有了15个名声,我才来到这里!啊哈,好的。提前发送Thx,欢迎!:)