我如何让一个div改变css的内容？

lf5gs5x2 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(157)

我在我的网站上做了一个新的页面，我希望一个div的文本内容根据按下的按钮而改变。我不知道该怎么做，哈哈。
我的第一个想法是使图像链接到ID。

<!-- items -->
<div id="items_wrapper">
    <div id="navigator_container">
        
        <!-- nav buttons -->
        <div id="navbutton_comics">
            <a href="#comics">
            <img src="images/comics_label.png"
                 alt="comics button"
                 width="120px">
            </a>
        </div>

        <!-- section 1: comics -->
        <div id="comics">
            help
        </div>
    </div>
</div>

然后我将容器div的样式属性应用到comics子部分。

/* items */
#items_wrapper{
    display: inline-block;
    text-align: center;
    margin-top: 50px;
    position: absolute;
    
    left:300px;
    width:700px;
    height:700px;
    
    background-color: aliceblue; 
}

/* navigator */
#navigator_container{
    display: inline-block;
    text-align: center;
    margin-top:20px;
    position: inherit;
    
    left:720px;
    width:300px;
    height:700px;
}
    
    /* section 1: comics */
    #comics{
    display: inline-block;
    text-align: center;
    margin-top:20px;
    position: inherit;
    
    left:720px;
    width:300px;
    height:700px;
}

    
/* items */

而不是相同的div，只是显示不同的文本，原始的div被推到屏幕的左边，而漫画div在最右边。这个怎么用？？

css

来源：https://stackoverflow.com/questions/76095628/how-do-i-get-a-div-to-change-content-with-css

2条答案

按热度按时间

mzmfm0qo1#

你可以只使用HTML和CSS来实现这一点，但这可能不是一种合适的方式，这完全取决于你的实际用例。
这里有一个例子，它使用HTML输入类型单选按钮的每个按钮。它们使用label元素进行样式化，然后是每个div的文本。它被设置为隐藏，除非选中相关输入。
由于它们都是具有相同名称的无线电输入，因此一次只能检查一个，因此它给出了所需的效果。

<style>
  input[name="text"] {
    opacity: 0;
  }
  
  label {
    background-color: #eeeeee;
    padding: 10px;
    border-radius: 10px;
  }
  
  input[name="text"]+*+* {
    display: none;
    position: absolute;
    left: 0;
  }
  
  input[name="text"]:checked+*+* {
    display: block;
  }
</style>
<input id="one" type="radio" name="text" checked><label for="one">First</label>
<div>FIRST TEXT</div>
<input id="two" type="radio" name="text"><label for="two">Second</label>
<div>SECOND TEXT</div>

赞(0）回复(0）举报 2023-05-02

bwleehnv2#

正如@rivertam所说，JS通常是更好的选择。我发现https://www.w3schools.com/js/js_htmldom_eventlistener.asp是学习JS的一个很好的参考。同时，如果你选择JS，这里是你如何通过不同的点击按钮来获得不同的文本：

<script>      
   document.getElementById('navbutton_comics').addEventListener('click', comicText);

    var isClicked = false;
    function comicText() {
        
        if (!isClicked) {
            document.getElementById('comics').innerHTML = "New Text"
            isClicked = true;
        } else {
            document.getElementById('comics').innerHTML = "Original Text"
            isClicked = false;
        }
    }
</script>

赞(0）回复(0）举报 2023-05-02

我来回答

我如何让一个div改变css的内容？

2条答案

相关问题

热门标签

最新问答