Блог

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

 <script type="text/javascript">
        $(function(){
            $("#accordion1").click(function(evt){
                $("#course1").load("course1.html")
                evt.preventDefault();
            })

            $("#accordion2").click(function(evt){
                $("#course2").load("course2.html")
                evt.preventDefault();
            })

            $("#accordion3").click(function(evt){
                $("#course3").load("course3.html")
                evt.preventDefault();
            })
        })
    </script>

<div id="content">
            <div id="course1">
            </div>
            <div id="course2">
            </div>
            <div id="course3">
            </div>
        </div>
  

Вы могли бы просто очистить другие элементы, используя $().empty() , но я думаю, что лучшим решением было бы переключить видимость, используя что-то вроде $().toggleClass('hiddenCourse') и display:none CSS, связанный с этим классом.

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

Альтернативой было бы подготовить весь контент к загрузке страницы, поэтому единственной оставшейся задачей было бы переключение видимости. Это зависит от множества параметров: если сумма содержимого большая (размер и количество файлов), если вы предпочитаете приложение с быстрой адаптивностью в обмен на более медленный запуск, количество разделов, которые посетитель, вероятно, откроет, и так далее.

Удалите содержимое других разделов при загрузке html-файла.

Похоже, вам нужно что-то вроде эффекта пользовательского интерфейса Accordion

Посмотрите здесь, таким образом, вам нужно загрузить содержимое только один раз. http://docs.jquery.com/UI/API/1.8/Accordion

Также вызов $('#id').empty(); приведет к удалению содержимого.

Если я понимаю, вы хотите очистить другие <div> :

 <script type="text/javascript">
    $(function(){
        $("#accordion1").click(function(evt){
            $("#course1").load("course1.html");
            $("#course2").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion2").click(function(evt){
            $("#course2").load("course2.html");
            $("#course1").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion3").click(function(evt){
            $("#course3").load("course3.html");
            $("#course1").empty();
            $("#course2").empty();
            evt.preventDefault();
        })
    })
 </script>
  

Вы могли бы либо:

• загрузите пустой URL-адрес в другие разделы перед загрузкой нового содержимого
• Удалите содержимое всех разделов перед загрузкой нового содержимого
• Оставьте содержимое, но используйте CSS, чтобы скрыть разделы, у которых не будет события щелчка