The url showing in the address bar: www.testsite.com/news#tab-1

The url which I want to show: www.testsite.com/news

The url showing in the address bar: www.testsite.com/news#tab-2

The url which I want to show: www.testsite.com/events

I tried rewriting rule using htaccess

 RewriteCond %{REQUEST_URI} /news#tab-2$
RewriteRule .* /news[L]

and

 RewriteRule www.testsite.com/test www.testsite.com/news#tab-1

But it didnt work. Please help.

My HTML:

<li id="news"><a href="#tab-1" title="News"><h1>News</h1></a></li>
<li id="events"><a href="#tab-2" title="Events"><h1>Events</h1></a></li>

My javascript:

$(document).ready(function() {
function ChangeUrl(page, url) {
if (typeof(history.pushState) != "undefined") {
var obj = {
Page: page,
Url: url
};
history.pushState(obj, obj.Page, obj.Url);
}
}
$(function() {
$("#news").click(function() {
alert('nwe');
ChangeUrl('news#tab-1', 'news');
});
$("#events").click(function() {
alert('events');
ChangeUrl('news#tab-2', 'events');
});
});
});
window.onload = function() {
window.location.replace("#");
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}
}

Current output:

on initial load, url appears as www.testsite.com/news (have a jump out news#tab-1)

Later on tab of news, url appears as www.testsite.com/news#tab-1

and of news, url appears as www.testsite.com/events#tab-2

I need to remove #trailing end.