Javascript 既に記述されたコードを修正せずに処理を追加したい

前提

該当のソースコードにて記述のコード３つは直接的な修正はNGとしています

###実現したいこと
別ファイルから以下の処理を追加するスクリプトを実装したい
・Javascriptの処理の中でタブ3を非表示にする

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title> タイトル</title>
5        <link rel="stylesheet" href="css/style.css">
6        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
7        <script type="text/javascript" src="js/script.js"></script>
8    </head>
9    <body>
10       <div class="tab">
11
12           <!-- タブメニュー-->
13           <ul class="tab-menu">
14               <li class="tab-item active" id="tab1">タブ1</li>
15               <li class="tab-item" id="tab2">タブ2</li>
16               <li class="tab-item" id="tab3">タブ3</li>
17           </ul> <!-- /.tab_menu -->
18
19
20           <!-- コンテンツ -->
21           <div class="tab-box">
22               <div class="tab-content show">コンテンツ1</div>
23               <div class="tab-content">コンテンツ2</div>
24               <div class="tab-content">コンテンツ3</div>
25           </div>
26
27       </div> 
28    </body>
29</html>

javascript
1$(function(){
2    $('.tab-item').click(function(){
3        // 現在activeがついてるクラスからactiveを外す
4        $('.active').removeClass('active');
5
6        // クリックされたタブメニューにactiveクラスを付与
7        $(this).addClass('active');
8
9        // 一旦showクラスを外す
10        $('.show').removeClass('show');
11
12        // クリックしたタブのインデックス番号取得
13        const index = $(this).index();
14
15        // タブのインデックス番号と同じコンテンツにshowクラス
16        $('.tab-content').eq(index).addClass('show');
17    });
18});

css
1*{
2    box-sizing: border-box;
3}
4
5ul, li {
6    padding: 0;
7    margin: 0;
8}
9
10li {
11    list-style: none;
12}
13
14.tab {
15    width: 500px;
16    max-width:100%;
17    margin: auto;
18}
19
20.tab-menu {
21    display: flex;
22}
23
24.tab-item {
25    height: 50px;
26    width: 150px;
27    text-align: center;
28    padding: 10px 0;
29    cursor: pointer;
30
31    /* widthを同じ比率で分け合う */
32    flex-grow: 1px;
33
34    /* 下線以外をつける */
35    border-top: 1px solid skyblue;
36    border-left: 1px solid skyblue;
37    border-right: 1px solid skyblue;
38}
39
40.tab-item:not(:first-child) {
41    border-left: none;
42}
43
44.tab-item.active{
45display: flex;
46    justify-content: center;
47    align-items: center;
48    border: 1px solid skyblue;
49}
50
51/* コンテンツは原則非表示 */
52.tab-content {
53    display: none;
54    font-size: 40px;
55}
56
57/* .showがついたコンテンツのみ表示 */
58.tab-content.show {
59    display: block;
60}

試したこと

Javascriptに以下のコードを実装することによりタブを非表示にすることは実現できております。

javascript
1$(function(){
2    document.getElementById("tab3").setAttribute("hidden","true");
3})

しかし、前提条件に合わなくなってしまうので
別のJsファイルから間接的に該当ソースコードのJavascriptファイル内のソースに追加をして
処理を実装する方法を模索しましたが、参考になる内容が出てきませんでした。

これに適した最善の策をご存じの方がいらっしゃいましたらご教示ください。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

OS：Windows 10 Pro
IDE：VSCode var1.58.2

行動規範の内容に同意します

回答2件

修正も追記もできないのであればなにか実行することは不可能では？

投稿2021/07/21 06:17

yambejp

総合スコア116724

Mr.sijimi

2021/07/21 06:24

ご回答ありがとうございます。やはり、別Jsファイルからjs関数をいじるには、直接的な修正・追記が必須のようですね。

yambejp

2021/07/21 06:37

> 別Jsファイルからjs関数をいじるそうではなくご自身でも書いているような $(function(){ $("#tab3").hide(); }) 的な追記をすれば済む話で、それをHTMLから呼び出せないなら処理のしようがないということです

行動規範の内容に同意します

ベストアンサー

html も js もいじらずに js の実行を追加するのは難しいと思います。

自分のブラウザのみで実現できればいいのであれば、

Tempermonkey でJS動作を追加したり、
Tampermonkey - Chrome ウェブストア

Stylish で css を追加したりする事はできます。

Stylish - ウェブサイト用カスタムテーマ - Chrome ウェブストア

どちらも特定の URL で動くように書けます

投稿2021/07/21 06:16

anozon

総合スコア662

Mr.sijimi

2021/07/21 06:22

ブラウザのアドオンであれば実現できるのですね！ただ、今回はサーバー上となってしまいますので今後の参考にさせていただきます。ご回答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Javascript 既に記述されたコードを修正せずに処理を追加したい

前提

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問