選擇時替換div內容
[英]Replace div content when selecting
問題描述
我正在做調色板板項目，並且在更改為其他主題時很掙扎。
初始頁面將具有“ 暖色”調色板，但是我想在單擊“ 所有主題”后進行更改。
如果您點擊下拉菜單，就像我發布的圖片一樣，用戶將可以選擇其他主題。
您將在下面找到我想象的圖像。
* { box-sizing:border-box; } body { margin:0; color: #FFF; } .board { letter-spacing: 1px; } .board-nav-indicator { position:absolute; top:0; left:0; width:75px; height:75px; /*background-color:red;*/ background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); background-image: linear-gradient(bottom right, #FF512F, #DD2476); transition:all 0.3s; transform:translateX(0); z-index:1; } [data-page='0'] .board-nav-indicator { transform:translateX(0); } [data-page='1'] .board-nav-indicator { transform:translateX(100%); } [data-page='2'] .board-nav-indicator { transform:translateX(200%); } .board-nav-buttons { display: flex; align-items: center; position:relative; z-index:2; } .board-pages { position:absolute; top:75px; left:0; width:100%; height:calc(100% - 75px); overflow:hidden; } .board-page { position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.4s; transform:translateX(0); overflow:auto; background-color: #262931; } .grid-row-theme .grid-item-theme { max-width: 130px; } #align-left { float: left; color: #747474; } #align-right { float: right; color: #9CC8E3; } .grid-item { flex:0 1 25%; padding:6px; } .grid-item-theme { flex:0 1 25%; padding:6px; } .grid-row { overflow-x:auto; white-space:nowrap; } .grid-row .grid-item { display:inline-block; max-width:110px; } .grid-item-content { text-align:left; font-family: "mr-eaves-modern"; font-size:0.3rem; text-transform:uppercase; } .pick-palette img{ border: 3px solid #FFF; } #dropdown-menu { display: flex; align-items: center; justify-content: center; text-align: center; margin: 2% 0 6% 0; font-size: 0.9rem; letter-spacing: 1px; } /* The Modal (background) */ .modal-inside { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content-theme { background-color: #fff; margin: 10% auto; /* 15% from the top and centered */ padding: 20px; border-radius:4px 4px 4px 4px; width: 70%; height: 430px; } /* The Close Button */ .close-theme { color: #000000; background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ font-size: 28px; font-weight: bold; } .close-theme:hover, .close-theme:focus { color: black; text-decoration: none; cursor: pointer; } .theme-list-dropdown { color: #BDBEC1; text-transform: uppercase; font-family: "mr-eaves-modern"; font-size: 0.9rem; text-align: center; } .theme-list-name { padding: 20.5px; } #all-theme-list-name { margin-top: -5px; } #warm-theme-list-name { color: #262931; /* background-color: #EEEEEF;*/ }
<html lang="en"> <head> <meta charset="utf-8"> <title>Omnibag Project</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="assets/css/style.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div class="board-pages"> <div class="board-page"> <div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div> <!-- The Modal --> <div id="myModal" class="modal-inside"> <span class="close-theme">×</span> <div class="modal-content-theme"> <div class="theme-list-dropdown"> <div class="theme-list-name" id="all-theme-list-name">All</div> <div class="theme-list-name" id="">Bright</div> <div class="theme-list-name">Dark</div> <div class="theme-list-name" id="warm-theme-list-name">Warm</div> <div class="theme-list-name">Cool</div> <div class="theme-list-name">Pastel</div> <div class="theme-list-name">Neon</div> </div> </div> </div> <!-- End: The Modal --> <div class="trending-above-palette"> <div class="grid-item-theme" id="align-left">Trending</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-beige"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Beige <!-- <i class="material-icons more-icon">more_horiz</i> --> </div> </div> <div class="grid-item grid-camel"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Camel </div> </div> <div class="grid-item grid-salmon"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Salmon Pink </div> </div> <div class="grid-item grid-navajo"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Navajo White </div> </div> <div class="grid-item grid-niagara"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Niagara </div> </div> <div class="grid-item grid-primrose"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Primrose </div> </div> <div class="grid-item grid-lapis"> <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> <div class="grid-item-content"> Lapis Blue </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://use.typekit.net/hoc0zbs.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script> $(".board-pages .grid-item").on("click",function(){ $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); $(this).addClass( "pick-palette" ); }); $(".board-pages .grid-item-pattern-board").on("click",function(){ $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); $(this).addClass( "pick-palette" ); }); </script> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal // var btn = document.getElementById("themeBtn"); var btn = document.getElementById("themeBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close-theme")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>
1 個解決方案
解決方案1
0 2017-05-08 03:08:35
可以使用Jquery click和addClass來實現。
單擊模式項后，編寫的jquery應該添加或更改top div的類。
喜歡
<div class'board-pages [theme]'>
... content
</div>
還應定義[主題]及其子元素的CSS。
否則此解決方案可能是另一種選擇
從 select 和 jQuery 選擇值時如何更改 Div 內容？
[英]How to change a Div content when selecting a value from a select with a jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.