Go from one fragment to another when selecting an item from a RecyclerView

I'm working with Tabs Fragments. Within the first fragment I receive Data from Firebase and show it with a recyclerview, I use the ItemClickSupport class for the onItemClicked method.

This is my code:

ItemClickSupport.addTo(recycler).setOnItemClickListener(new ItemClickSupport.OnItemClickListener(){
    @Override
    public void onItemClicked(RecyclerView recyclerView, int position, View v){

        Fragment fragment = new NegocioFragment();
        Bundle args = new Bundle();
        args.putString("data", "This data has sent to FragmentTwo");
        fragment.setArguments(args);
        FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.activity_main, fragment);
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
        transaction.addToBackStack(null);
        transaction.commit();
        Toast.makeText(getActivity().getApplicationContext(), "Diste click en el número: "+recycler.getChildAdapterPosition(v), Toast.LENGTH_SHORT).show();
    }
});

The problem here is that, when I click, the new fragment loads over the already created one, but I want to go from one fragment to another.

This is my activity_main.xml '

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/tab_layout"/>

In my tab_fragment_1.xml I only have the recyclerview

<android.support.v7.widget.RecyclerView
    android:id="@+id/lstCategorias"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

and this is my business_fragment.xml which will receive data in a recyclerview

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="Negocios"
    android:id="@+id/lblnegocio"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/lstNegocios"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

and in my BusinessFragment class I only have the onCreateView for the time being

public class NegocioFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    return inflater.inflate(R.layout.negocio_fragment, container, false);
}