Переключение между <div>элементами с помощью кнопок

Question

У меня есть конкретная цель.

Пожалуйста, укажите эту страницу: http://cubancomplex.kodingen.com/test/MM/dashboard1.html

В самом нижнем правом углу есть <div> с двумя кнопками на каждой стороне. <div> в настоящее время содержит одну диаграмму Google внутри.

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

Я не знаком с javascript или jQuery, поэтому буду признателен за любую помощь! Как мне добиться этого?

Вот код для этого раздела:

<div id="footer">
    <div class="markerNavLeft" title="Prev" id="prevMarker">&lsaquo;</div>
    <div id="markers">
        <div id="chart">
            <div id="auckland_chart_div"></div>
        </div>
    </div>
    <div class="markerNavRight" title="Next" id="nextMarker">&rsaquo;</div>
</div>

Answer 1

Исходя из моего опыта, есть 2 варианта, которые вы можете использовать ..

1. вы можете разместить свои диаграммы в вашем div id = "chart". Первый добавляет класс, чтобы пометить его как выбранный (например, выбранный), конечно, другой скрыт ... Пожалуйста, добавьте один и тот же класс для всей диаграммы (например, детали графика). Затем вы можете использовать var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected"); для предыдущей кнопки вы можете использовать функцию .previous.

2. Вы можете использовать ajax (функция .ajax или .load). Пометьте каждую диаграмму идентификатором, чтобы вы знали, что является следующей или предыдущей диаграммой (в пределах php).