li をクリック 表示の内容のみ変更

Question

環境：Laravel5.5

ウェブ素人の質問ですみません。

        <div class="txt-wrap" style="margin-top: 60px;">
            <h4>スタッフブログ</h4>
            <ul class="blog-category-list">
                <li><a>お知らせ</a></li>
                <li><a>現場</a></li>
                <li><a>ひとりごと</a></li>
                <li><a>ALL</a></li>
            </ul>

HTMLでは liリンクにカテゴリが記載されていますので
liクリックすると、
表示されている内容がコンテンツごとに検索された内容に
表示したいと考えています。
質問は、
liをクリックし、ページがリダイレクト（再表示）しないように
内容だけを変更することは可能でしょうか？

できれば、javascriptを使用しないでシンプルにできればありがたいです。

環境は、laravel5.5を使用しています。

素人のため、質問も不足ありましたら申し訳ありません。
内容は、追記などさせていただきますので、どなたかご回答をいただけますと助かります。
どうぞ宜しくお願いします。

Comments

[hiok]

ページの再読み込み無し、javascript無し、aタグ使用、という条件ではちょっと厳しいと思います

[Suzuki-Yamato]

そうなんですね。
厳しいんですね。
javascript ありでしたら、できそうですか？
すみません。私、素人です。

[hiok]

laravelを使うくらいの方ですから javascriptでできると思いますよ。

[Suzuki-Yamato]

なるほどです。
ありがとうございます。
多分、jQuery で タブで内容を変更する方法で良いかもしれませんね。
ありがとうございます。

[hiok]

表示替えする内容（それぞれの検索された内容）が、最初にページが表示された時に決まっているのであれば、javascript使わずにaタグの代わりにinputのラジオボタンとcssを使ってもできるかもしれません。

[Suzuki-Yamato]

最初ページを読み込んだ際には、
情報は全て読み込んでおき、
タブが選択された状態で、表示を切り替えようと考えていました、

cssは、display:none;
でよろしかったでしょうか？

[hiok]

はい。display:none;とdisplay:block;を入れ替える感じです

[Suzuki-Yamato]

ありがとうございます。

Answer 1

イベントのデフォルトの動作をさせたくないのであれば、event.preventDefault()でどうぞ。

<li><a onclick="event.preventDefault()">foo</a></li>

Comments

[Suzuki-Yamato]

なるほどです。
ありがとうございます。
JavaScript が未学習のため、アドバイス助かります。