结合改变活动li和重新加载页面的一部分javascript

我有两个简单的功能点击我的页面与js，第一个是改变css活跃在当前li和另一个是只重新加载内容。结合改变活动li和重新加载页面的一部分javascript

变化积极李

$(".list li").on("click", function(){ 
    $(".list li").removeClass('active'); 
    $(this).addClass('active'); 
});

重装内容仅供

$('.content').load('Passtel/dashboard'); 
$('ul.list li a').click(function(){ 
    var page = $(this).attr('href'); 
    $('.content').load('Passtel/'+page); 
    return false; 
});

的问题是，它只是功能重载内容仅供如果有两个在运行工作，但我已经测试每个功能的作品就这样。

如何使两个功能一起工作？

这是我的内容结构

 <!-- Menu --> 
     <div class="menu"> 
      <ul class="list"> 
       <li class="active"> 
        <a href="dashboard"> 
         <i class="material-icons">home</i> 
         <span>DASHBOARD</span> 
        </a> 
       </li> 
       <li> 
        <a href="check"> 
         <i class="material-icons">text_fields</i> 
         <span>CHECK SITE</span> 
        </a> 
       </li> 
       <li> 
        <a href="datek"> 
         <i class="material-icons">layers</i> 
         <span>DATA TEKNIS</span> 
        </a> 
       </li> 
      </ul> 
     </div>

来源

2017-10-13 andrianrion

什么是HTML结构？ –

@PhaniKumarM我更新我的问题与我的html结构， – andrianrion

您可以使用这样的事情：

$(function() { 
    $('.content').load('Passtel/dashboard'); 
    $('ul.list li a').click(function() { 
     e.preventDefault(); 
     $(".list li").removeClass('active'); 
     $(this).parent().addClass('active'); //added parent() here 
     var page = $(this).attr('href'); 
     $('.content').load('Passtel/' + page); 
     return false; 
    }); 
});

//$('.content').load('Passtel/dashboard'); 
 
$('ul.list li a').click(function (e) { 
 
     e.preventDefault(); 
 
\t $(".list li").removeClass('active'); 
 
\t $(this).parent().addClass('active'); 
 
\t var page = $(this).attr('href'); 
 
\t //$('.content').load('Passtel/' + page); 
 
\t return false; 
 
});

.active { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
\t <ul class="list"> 
 
\t \t <li class="active"> 
 
\t \t \t <a href="dashboard"> 
 
\t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t <span>DASHBOARD</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href="check"> 
 
\t \t \t \t <i class="material-icons">text_fields</i> 
 
\t \t \t \t <span>CHECK SITE</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href="datek"> 
 
\t \t \t \t <i class="material-icons">layers</i> 
 
\t \t \t \t <span>DATA TEKNIS</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t </ul> 
 
</div>

来源

2017-10-13 17:42:46

感谢您的答案，但不幸的是它不工作，页面重新加载，就像以前一样，但活动li卡在第一里。 – andrianrion

可以试试我上面的代码。使用'e.preventDefault（）'。请注意我注释了加载的代码。 –

e.preventDefault（）缺失的行。我在$（'ul.list li a'）中添加e。click（function（）变为$（'ul.list li a'）。click（function（e）and thats works，thanks for your help – andrianrion

可以实现这一目标只有一个功能。希望能帮助到你！

jsbin.com

const ul = $(".list"); 
const list = ul.find('li'); 

ul.on("click", 'li a', function(e){ 
    e.preventDefault(); 
    list.removeClass('active'); 
    $(this).parent().addClass('active'); 

    var page = $(this).attr('href'); 
    // replace this with your $('.content').load('Passtel/'+page); 
    $('.content').load('https://jgatjens.com/?' + page); 
});

来源

2017-10-13 18:51:55 jgatjens

thanks for your答案，这是工作，这是很大的帮助，：D – andrianrion

@andrianrion欢迎您！ – jgatjens

结合改变活动li和重新加载页面的一部分javascript

回答

相关问题