您好我正在尝试从DIV构建导航,它使用jQuery
AJAX函数来加载页面.
我想要的是当用户点击页面上的说明,然后是仪表板或他们所在的活动页面时,所谓的活动页面已被删除并添加到新单击的一个
<div class="dijit active" id="dijit_dashboard">Dashboard</div> <div class="dijit" id="dijit_pages">Pages</div>
jQuery代码并不能完成这项工作.
$("#dijit_pages").click(function() {
$("#dijit_utm").load('index.html');
$(this).addClass("active");
});
但我不确定如何从所有其他人中删除课程.
解决方法
$(function() {
$(".dijit").live("click",function() {
$(".dijit").removeClass("active"); // remove active class from all
$(this).addClass("active"); // add active class to clicked element
$("#dijit_utm").load('index.html');
});
});
使用此方法将意味着为每个链接加载相同的页面.如果您需要为每个项目加载页面,那么以下代码将更加贴切：
HTML
<div class="dijit active" id="dijit_dashboard"><a href="dashboard.html">Dashboard</a></div> <div class="dijit" id="dijit_pages"><a href="pages.html">Pages</a></div>
jQuery的
$(function() {
$(".dijit").live("click",function(e) {
e.preventDefault();
$(".dijit").removeClass("active"); // remove active class from all
$(this).addClass("active"); // add active class to clicked element
var href = $(this).find("A").attr("href");
$("#dijit_utm").load(href);
});
});
UPDATE
这个旧答案似乎仍然得到了相当稳定的观点,所以这里是使用最新jQuery方法的更新答案,因为live()自1.7版以来已被弃用：
$(document).on('click','.dijit',function(e) {
e.preventDefault();
var $el = $(this);
$el.addClass("active").siblings().removeClass('active');
$("#dijit_utm").load($el.find('a').attr('href'));
});
