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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1129閲覧

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

Mr.sijimi

総合スコア21

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/07/21 06:09

前提

該当のソースコードにて記述のコード3つは直接的な修正は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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2021/07/21 06:17

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mr.sijimi

2021/07/21 06:24

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

2021/07/21 06:37

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

0

ベストアンサー

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問