Javascript来隐藏一个DIV_Javascript_Html_Css

Javascript来隐藏一个DIV

javascript html css

Javascript来隐藏一个DIV,javascript,html,css,Javascript,Html,Css,我如何利用Javascript来显示推荐信的“页面”——这样，当点击一个链接时，它会显示一组DIV，而隐藏其他DIV，从而允许我使用编号链接循环浏览内容。我已经附上了我的基本设计代码，我只是不熟悉如何使用JS使其真正发挥作用。在搜索SOF时，我只能找到使用Jquery脚本的示例，但我没有Jquery 目标是，当您单击右上角的“1”链接时，页面上将仅显示带有“1”的模糊，与单击“2”链接相同，所有1和3将消失，并且仅显示带有2的模糊 CSS @charset 'utf-8'; /* CSS Doc

我如何利用Javascript来显示推荐信的“页面”——这样，当点击一个链接时，它会显示一组DIV，而隐藏其他DIV，从而允许我使用编号链接循环浏览内容。我已经附上了我的基本设计代码，我只是不熟悉如何使用JS使其真正发挥作用。在搜索SOF时，我只能找到使用Jquery脚本的示例，但我没有Jquery

目标是，当您单击右上角的“1”链接时，页面上将仅显示带有“1”的模糊，与单击“2”链接相同，所有1和3将消失，并且仅显示带有2的模糊

CSS

@charset 'utf-8';
/* CSS Document */

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-color: #A8A8A8;
    font-size:14px;
    font-family: 'Open Sans', sans-serif;
}

box {
    background-color:#FFFFFF;
    width:950px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
}

.testimonialnavigation {
    width:950px;
    margin-left: auto;
    margin-right: auto;
}

ul.testimonialpages {
    list-style-type: none;
    font-size: 16px;
    font-weight: bold;
    padding-right:30px;
}

.testimonialpages li a {
    float: right;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    height:30px;
    width:30px;
    line-height:30px;
    background-color:#C82633;
    display:inline-block;
}

.testimonialpages li a:hover {
    color: #FFFFFF;
    background-color: #737373;

}

.testimonials {
    clear:both;
    width:875px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    background-color:#EDEDED;
    min-height:50px;
    border-radius: 15px;
    padding:15px;
}

.testimonials:nth-of-type(odd) {
    background-color:#D3D3D3;
}

.hidden {
    display:none;
}

HTML

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Title</title>
<link rel='stylesheet' href='teststyle.css' />
</head>
<body>



<div class="box">                      

    <div class="testimonialnavigation">
        <ul class="testimonialpages">
            <li><a href="" id="page1">3</a></li>
            <li><a href="" id="page2">2</a></li>
            <li><a href="" id="page3">1</a></li>
        </ul>
    </div>

    <br><br>


        <div class="container">

            <div id="content1" class="testimonials">
            <i>
            111111 111111 111111111 11111111111
            </i><br>
            <b>
            - 11111111111
            </b>
            </div>

            <div id="content2" class="testimonials">
            <i>
            11111 111111 1111111 11111111 1111111111
            </i><br>
            <b>
            - 11111111
            </b>
            </div>

            <div id="content3" class="testimonials">
            <i>
            22222 22222222 222222 2222222 222222222
            </i><br>
            <b>
            - 2222222
            </b>
            </div>

            <div id="content4" class="testimonials">
            <i>
            2222222 222222 2222222222 222222 2222222 222222
            </i><br>
            <b>
            - 222222
            </b>
            </div>

            <div id="content5" class="testimonials">
            <i>
            333333 3333333 33333333 33333333 333333 3 33333333 
            </i><br>
            <b>
            - 33333333
            </b>
            </div>

            <div id="content6" class="testimonials">
            <i>
            333333 33333333 333333 333333333333
            </i><br>
            <b>
            - 333333333
            </b>
            </div>

        </div>
</div>



</body>
</html>


标题








111111 111111 111111111 11111111111


- 11111111111
11111 111111 1111111 11111111 1111111111


- 11111111
22222 22222222 222222 2222222 222222222


- 2222222
2222222 222222 2222222222 222222 2222222 222222


- 222222
333333 3333333 33333333 33333333 333333 3 33333333 


- 33333333
333333 33333333 333333 333333333333


- 333333333

您可以通过href传递id，如下所示：

<a href="#mydiv">Take me to my div</a>    

<div id="mydiv"><p>Hello</p></div>


你好

或：


我的潜水艇！

隐藏

展示

考虑学习jQuery以使事情变得更简单

您甚至可以通过使用锚（

href=“#页面中的某个名称”

）和CSS选择器

：active

来解决此问题。您可以使用JQuery切换轻松实现这一点。这将根据指定的选择器隐藏和显示。它可以是类、id或元素

例如：

<script>
$(document).ready(function(){
    $("a").click(function(){
        $(".testimonials").toggle();
    });
});
</script>


$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
$（“.essentials”）.toggle（）；
});
});


document.getElementById（'page1'）。addEventListener（'click'，function（）{
document.getElementByClassNames（'commentials'）.style.display='none'；
document.getElementById（'content1'）.style.display='block'；
});

这样做就可以了，很明显，你要么对每一个都做类似的事情，要么重构它，使之在不违反枯燥原则的情况下工作

看看：

而且：

我投票决定将这个问题作为离题题来结束，因为SO不是来为您编写代码的，而是来帮助您编写代码的。可怜的问题，请回答

document.getElementById('id-of-some-element').style.display = 'none';

document.getElementById('id-of-some-element').style.display = 'block';

<script>
$(document).ready(function(){
    $("a").click(function(){
        $(".testimonials").toggle();
    });
});
</script>

<script>
document.getElementById('page1').addEventListener('click', function(){
    document.getElementByClassNames('testimonials').style.display = 'none';
    document.getElementById('content1').style.display = 'block';
});
</script>