CODEWITHSUNDEEP
javascriptjquerycodeigniter
andrianzainur
andrianzainur

Reputation: 124

combine change active li and reload part of page javascript

I have two simple function on click in my page with js, first is to change css active in current li and the other is to reload content only .

change active li

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

reload content only

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

the problem is, it just function reload content only works if there two are running, but I've tested each of function works as it is.

How can I make both of function works together?

this is my content structure

        <!-- 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>

Upvotes: 0

Views: 509

Answers (2)

jgatjens
jgatjens

Reputation: 688

You can accomplish that with only one function. Hope it helps!

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);
});

Upvotes: 1

Phani Kumar M
Phani Kumar M

Reputation: 4590

You can use something like this:

$(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();
	$(".list li").removeClass('active');
	$(this).parent().addClass('active');
	var page = $(this).attr('href');
	//$('.content').load('Passtel/' + page);
	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">
	<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>

Upvotes: 0

Related Questions