Переключаемый стол нажатием кнопки

Question

Как сделать переключаемый стол с кнопками, чтобы привести к другому виду другой таблицы? Что-то вроде этого:

Как вы можете видеть, когда вы нажимаете на кнопки, он принимает вас в другой список таблиц.

Вот основа: http://jsbin.com/agavid/136/edit

Нужно что-то похожее на это.

Answer 1

здесь предложение

обертывание каждой таблицы в <div id="table1"><div id="table2"> и т.д .. и скрыть их все по умолчанию. вот некоторая помощь по этому поводу: hiding div using js

и затем показывать только <div> для таблицы, связанной с кнопкой, на которую нажал пользователь. вы можете сделать это, используя javascript, jquery, как пару примеров.

Возможно, вам потребуется начать изучение некоторых основных javascript/jquery, если вы еще не знаете их, вам это понадобится.

удачи.

Answer 2

Вы можете создать несколько разделов в одном файле и скрыть все разделы, кроме основного, который вы хотите отображать во время начальной загрузки страницы. затем используйте «onClick =» showNextDiv(); » внутри самих кнопок.

Образец JavaScript будет:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<script language="JavaScript" type="text/javascript"> 
jQuery.noConflict() 
function showNextDiv() { 
    document.getElementById('DivName').style.display = "block"; 
    document.getElementById('FirstDiv').style.display = "none"; 
} 
</script> 

Все это говорит, что, когда кто-то нажимает на кнопку, этот скрипт запускается и отображает DIV в «DivName». Вот что означает «блок». Он также отключает подразделение «FirstDiv», используя «none».

В сценарий вы можете добавить столько «блоков» и/или «нет». Если у вас есть 6 отделов, вы хотели бы отобразить один и выключить 5.

Надеюсь, это будет полезно. Я не эксперт в этом, но он отлично работает для меня.

Answer 3

Вы можете создать несколько разных таблиц и использовать простой сценарий JS/jQuery для отображения и скрытия таблиц на основе нажатия на эту кнопку.

По существу, вы должны показать все таблицы в начале (для прогрессивного улучшения), а затем скрыть все из них, кроме первого. Затем, когда нажата кнопка, скройте все таблицы и покажите только те, которые связаны с этой кнопкой.

Вот демо, о чем я говорю. http://jsfiddle.net/7Ywbn/2/

(function() { 
var tables = $("table"); 
//Grabs all the tables 
tables.hide().first().show(); 
//Hides all the tables except first 
$("a.button").on("click", function() { 
    //Adds eventListner to buttons 
    tables.hide(); 
    //Hides all the tables 
    var tableTarget = $(this).data("table"); 
    //Gets data# of button 
    $("table#" + tableTarget).show(); 
    //Shows the table with an id equal to data attr of the button 
}) 
})(); 

Надеюсь, я правильно понял ваш вопрос.