Javascript动态页面_Javascript_Jquery_Html_Css_Dynamic

Javascript动态页面

javascript jquery html css dynamic

Javascript动态页面,javascript,jquery,html,css,dynamic,Javascript,Jquery,Html,Css,Dynamic,小背景：该网站是一个大学作业，我们不允许使用第三方库，如bootstrap等。我认为我有一个解决方案，但我只能让它工作2个按钮（显示或隐藏相反的一个），但不能多个。我至少会有10个按钮我试图研究堆栈溢出，但找不到解决方案。这是我的HTML+CSS。主页是默认页面，单击其按钮时，其余页面应显示在下面的空白处。这是一个产品页面 JSFIDDLE：任何帮助将不胜感激，它不需要是一个书面的解决方案，但简单地指向正确的方向我会做。。。我几乎没有javascript知识，所以我不完全确定我首先应该搜索什

小背景：该网站是一个大学作业，我们不允许使用第三方库，如bootstrap等。我认为我有一个解决方案，但我只能让它工作2个按钮（显示或隐藏相反的一个），但不能多个。我至少会有10个按钮

我试图研究堆栈溢出，但找不到解决方案。这是我的HTML+CSS。主页是默认页面，单击其按钮时，其余页面应显示在下面的空白处。这是一个产品页面

JSFIDDLE：

任何帮助将不胜感激，它不需要是一个书面的解决方案，但简单地指向正确的方向我会做。。。我几乎没有javascript知识，所以我不完全确定我首先应该搜索什么

<html>
    <head>
        <title>Design</title>
        <link rel="stylesheet" type="text/css" href="css/store.css">
        <script type="text/javascript" src="javascript/js.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <ul>
            <li id="left"><a href="#home">Company</a></li>
            <li id="left"><a href="#home">Sales</a></li>
            <li id="left"><a href="#home">About</a></li>
            <li id="left"><a href="#home">Contact</a></li>
            <li id="right1"><a href="">Cart</a></li>
            <li id="right2" onclick="myFunction()"><a href="">Geolocate</a></li>
        </ul>

        <dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>

        <div id="items">
            <ul>
                <li id="left"><a href="">Home</a></li>
                <li id="Cars"><a href="">Super Cars</a></li>
                <li id="Cars"><a href="">Topic 2</a></li>
            </ul>

            <div id="homepage">
                <span><p> Welcome to the store</p></span>
            </div>

            <div id="showCars">
                <div class="productBox">
                    <div class="productPicture">
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}

body{
    margin: 0px;
    padding: 0px;
    font-family: tahoma;
    background-image: "/img/bg.jpg";
}

p{
    text-align: center;
}

#items{
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    margin-top: 25px;
    margin-left: 225px;
    margin-right: 225px;
    position: absolute;
    width: 80%;
    height: 80%;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    background: white;
    overflow: hidden;
}

.productBox{
    border: 2px solid black;
    width: 200px;
    height: 300px;
    margin-top: 5px;
    text-align: center;
}

.productPicture{
    border: 1px solid black;
    width: 90%;
    height: 150px;
    margin: 0 auto;
    margin-top: 5px;
    padding: 5px;
    display: inline-block;
}

#showCars{
    display: none;
}


设计








您的IP地址：





欢迎光临本店
ul{列表样式类型：无；边距：0；填充：0；溢出：隐藏；背景色：#363377；边框底部：1px纯白；}
li a{显示：内联块；颜色：白色；文本对齐：居中；填充：14px 16px；文本装饰：无；}
#左，#Cars{float:left；border-right:solid 1px#fff；}
#right1，#right2{float:right；}
#左：悬停，#右：悬停，#汽车：悬停{背景色：#555；}
身体{
边际：0px；
填充：0px；
字体系列：tahoma；
背景图像：“/img/bg.jpg”；
}
p{
文本对齐：居中；
}
#项目{
显示：内联块；
边框：1px纯黑；
填充：10px；
边缘顶部：25px；
左边距：225px；
右边距：225px；
位置：绝对位置；
宽度：80%；
身高：80%；
-莫兹盒阴影：1px2p4pRGBA（0,0,0,0.5）；
-webkit盒阴影：1px2p4pRGBA（0,0,0,5）；
盒影：1px2p4pRGBA（0,0,0,5）；
背景：白色；
溢出：隐藏；
}
.productBox{
边框：2件纯黑；
宽度：200px；
高度：300px；
边缘顶部：5px；
文本对齐：居中；
}
.产品图片{
边框：1px纯黑；
宽度：90%；
高度：150像素；
保证金：0自动；
边缘顶部：5px；
填充物：5px；
显示：内联块；
}
#展示车{
显示：无；
}

如果我正确理解您的需求，这里有一些伪代码：有很多方法可以做到这一点，我没有太多的东西要讲，所以这里只有一个示例

<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
    <ul>
       <li id=IDname0></li>
       <li id=IDname1></li>
       <li id=IDname2></li>
    </ul>


</div>




<script>

var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];

var x = 0;

Function cars()
{
// for each element in cars,
   for ( x=0; x<cars.length; x++ )
   {
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
      Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name ( from your <li> above
   }
}

Function boats()
{
   for ( x=0; x<cars.length; x++ )
   {
      Document.getElementById('IDname'+x).innerHtml = boats[x];
   }
}



</script>







var汽车=[“萨博”、“沃尔沃”、“宝马”]//创建要加载到标记中的值数组
var船=[“捕鱼”、“筏”、“其他”]；
var x=0；
多功能车（）
{
//对于汽车中的每个元素，
对于（x=0；x您可以使用a，然后使按钮链接到查询字符串参数，该参数检查字符串并定义每个页面/按钮的功能。这将允许您使页面html css等基本相同，但在单击按钮时更改的部分除外。

许多网站都这样做。

示例：
我在这里找到了一个解决方案：对于任何其他正在寻找相同内容的人！
我只想指出，您实际上使用的是第三方库。jQuery！=vanilla JS
我的意思是像bootstrap这样的东西，我们被允许使用JQHey，感谢您花时间回复，您是否可以对代码稍加注释以便我理解知道我在找什么吗？这个开关会显示一个ID为cars的div，这样只会显示cars&然后如果单击say boots，则会删除cars并显示boots？当然！我为cars（）函数添加了注释。boots的逻辑完全相同，除了boots。希望这对您有所帮助！