html - заставить столбец появляться после нажатия на кнопку - PullRequest
Новая
       7

html - заставить столбец появляться после нажатия на кнопку

0 голосов
/ 01 февраля 2020

Я играл с HTML и создал столбец, который сразу же появляется, когда я открываю свой файл в браузере. Я попытался переместить классы столбцов и строк, но не могу понять, как его получить, чтобы столбец не появлялся до тех пор, пока я не выберу опцию в раскрывающемся меню. Мне было интересно, как я мог решить эту проблему? 

<html>
    <head>
        <title>Testing Display</title>
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .center{
        text-align: center;
        border: 3px solid #73AD21;
    }
    {
        box-sizing: border-box;
    }
    .column {
      float: left;
      width: 30%;
      padding: 10px;
      height: 2000px; 
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    </style>
    <body>

    <div class ="center">
        <p><div><h1>Testing Display</h1></div><br /><p>
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target" onchange="display(this)"> 
            <option value="none">Choose an option</option>
            <option value="one">Option one</option> 
        </select>
        <input type=button value="Select" onclick="display()"/>
        <div id="add"></div>
        </form>
        </div>
    </div>
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
        <div id="div"></div> 
      </div>
    </div>
        <script src="order.js"></script>
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 01 февраля 2020

Иметь начальную видимость столбца для скрытого.

Есть функция Javascript для добавления нового класса в столбец onChange. Примерно так 

function onSelect() {
  //or add id to easily access unique single element.
  var element = document.getElementByClassName("column")[0];
  element.classList.add("showCol");
} 

.column {
  visibility: hidden;
  ...
}
.showCol {
  visibility: visible;
  ...
}

Также можно добавлять стили и удалять стиль onChange вместо переключения классов.

0 голосов
/ 01 февраля 2020

Javascript Решение, вызовите этот метод в событии onchange раскрывающегося списка: 

function ddlChange(){
if (document.getElementById("list").value === "one"){
        document.getElementsByClassName("column").style.display = "table-cell";
    }     
}

Использование jQuery: 

$("#list").change(function () {
           if($('#list option:selected').val() === "one")
               $(".column").css("display","table-cell");
 });

В качестве альтернативы, вы также можете попробовать добавить или удалите класс вместо изменения встроенного CSS значения.

...