Javascriptの動的ページ

リトル背景：このサイトは大学の割り当てのためのもので、ブートストラップなどのサードパーティのライブラリは使用できません。私は解決策があると思っていましたが、2つのボタンまたは反対のものを隠す）が、複数ではありません。少なくとも10個のボタンがあります。Javascriptの動的ページ

私はスタックのオーバーフローについて調査しようとしましたが、解決策を見つけることができませんでした。ここに私のHTML + CSSがあります。ホームはデフォルトのページで、残りの部分はボタンをクリックすると下の空白に表示されます。これは商品ページです。

JSFIDDLE：任意の助けをいただければ幸いですhttps://jsfiddle.net/33n7yb5h/

、それが書かれたソリューションである必要はありませんが、単に正しい方向に私を指していることでしょう...私はノー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; 
}

出典

2017-01-01 Royals HF

実際にはサードパーティのライブラリを使用していることを指摘したいと思います。 'jQuery！= vanilla JS' – Schlaus

私はブートストラップのようなものを意味します、私たちは許可されています –

は、いくつかの擬似コードであります多くのことが続いているので、ここには1つの例があります。

<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>

出典

2017-01-02 02:03:31 John

ちょっと、返信する時間をとってくれてありがとう、おそらく少し私は何を探しているのか分かりますか？このトグルでID車と一緒に車が表示され、ボートがクリックされたと表示されたら車が取り外されてボートが表示されますか？ –

cars（）関数のコメントを追加しました。ボートは、ボートを除いて全く同じロジックです。うまくいけば、これはあなたを助ける！ – John

あなたはquery stringを使用して、ボタンは、文字列をチェックし、各ページ/ボタンは何をするかを定義クエリ文字列パラメータにリンクすることができます。これにより、ボタンクリックで変更される部分を除いて、ページhtml cssなどをほとんど同じにすることができます。
多くのサイトでこれが行われています。
例：https://www.etsy.com/ca/search?q=wallet

出典

2017-01-02 02:25:18 Stickman

解決策が見つかりました：http://www.w3schools.com/howto/howto_js_tabs.asp同じものを探している他の人のために！

出典

2017-01-02 17:56:36

答えて

関連する問題