fragmentが重なって表示されてしまう

前提・実現したいこと

ここを参考にタブを設置し、fragmentを切り替えています。

このとき、タブ１のfragment1内のLitViewのアイテムをクリックすると別のPagefragmentを表示した後、タブ２のfragment2を表示すると、
Pagefragmentが消えず、fragment2とPageFragmentが重なって表示されてしまいます。

fragment1でPageFragmentへの遷移箇所でgetActivity().getFragmentManager()を使用しているのが原因かと思うのですが、解決方法がわかりません。

ご教示お願い致します。

該当のソースコード

MainActivityのタブ切り替え箇所

public void onTabChanged(String tabId) {
        Log.d("TAB_FRAGMENT_LOG","tabId:" + tabId);
        if(mLastTabId.equals(tabId)){
            FragmentTransaction fragmentTransaction
                    = getSupportFragmentManager().beginTransaction();
            if(tabId.equals("tab1")){
                fragmentTransaction
                        .replace(R.id.real_content, new fragment1());
            }else if(tabId.equals("tab2")){
                fragmentTransaction
                        .replace(R.id.real_content, new fragment2());
            }
            fragmentTransaction.commit();
        }

fragment1のfragment遷移箇所

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                    Fragment fragment = TestFragment.newInstance(position+1);
                    getActivity().getFragmentManager().beginTransaction()
                            .replace(R.id.real_content, fragment)
                            .addToBackStack(null)
                            .commit();
            }
        });