如何在单个标签中使用多个片段？

Question

问题是我想通过单击列表视图上的项目转到另一个片段，但是当我替换片段时，它与前一个片段重叠！我无法隐藏上一个片段！我的代码如下：

package com.harar.khalil.quraan.fragments;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.widget.FrameLayout;

import com.harar.khalil.quraan.R;
import com.harar.khalil.quraan.databases.DatabaseHelp;
import com.harar.khalil.quraan.interfaces.FragmentListener;

public class Pager extends FragmentStatePagerAdapter {

    //integer to count number of tabs
    private int tabCount;
    private DatabaseHelp databaseHelp;
    private FragmentManager fragmentManager;
    private FrameLayout frameLayout1,frameLayout;
    //Constructor to the class 
    public Pager(FragmentManager fm, int tabCount, DatabaseHelp databaseHelp, FrameLayout frameLayout) {
        super(fm);
        //Initializing tab count
        this.fragmentManager=fm;
        this.tabCount= tabCount;
        this.databaseHelp=databaseHelp;
        this.frameLayout=frameLayout;
    }

    //Overriding method getItem
    @Override
    public Fragment getItem(int position) {
        //Returning the current tabs 
        switch (position) {
            case 0:
                 final SuraFragment suraFragment=SuraFragment.newInstance(databaseHelp);


                 suraFragment.setOnFragmentListener(new FragmentListener() {
                    @Override
                    public void OnclickItem(DatabaseHelp databaseHelp, int id, String oromo) {
                      QuranFragment quranFragment=QuranFragment.newInstance(databaseHelp,id,oromo);
                      String tag = suraFragment.getClass().getName();
                      FragmentTransaction transaction=fragmentManager.beginTransaction();
                      fragmentManager.popBackStack();
                      transaction.replace(R.id.fragment_container,quranFragment,tag);
                      transaction.addToBackStack(tag);
                      transaction.commit();
                    }
                });
                return suraFragment;
            case 1:
                return MuzhafFragment.newInstance();

            case 2:
                return new BookMarkFragment();
            default:
                return null;
        }
    }

    //Overriden method getCount to get the number of tabs 
    @Override
    public int getCount() {
        return tabCount;
    }
}

输出是下面的图像