下記のSimple Tabs wを使って、同一ページ内で複数のタブコンテナを表示したいのですが、どのような書き方をしたらよいでしょうか。
http://www.sohtanaka.com/web-design/simple-tabs- …

xhtml,cssは理解しているつもりですが、jQueryはよくわかっていない状態です。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

<script type="text/javascript"


src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ …
<script type="text/javascript">

$.hoge = function( target )
{
//Default Action
target.find(".tab_content").hide(); //Hide all content
target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab
target.find(".tab_content:first").show(); //Show first tab content

//On Click Event
target.find("ul.tabs li").click(function()
{
target.find("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
target.find(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

activeTab = activeTab.replace( '#', '.' );

target.find(activeTab).fadeIn(); //Fade in the active content

return false;
});
}// $.hoge

// --------------------------------------
$(function()
{
$.hoge( $('#num1') );
$.hoge( $('#num2') );
});

</script>
</head>

<body>

<div id="num1" class="container">
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">

<div class="tab1 tab_content">
<h2>Gallery</h2>
</div>

<div class="tab2 tab_content">
<h2>Submit</h2>
</div>

</div>
</div>

<div id="num2" class="container">
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">

<div class="tab1 tab_content">
<h2>Gallery</h2>
</div>

<div class="tab2 tab_content">
<h2>Submit</h2>
</div>

</div>
</div>
</body>
</html>
----------------------------
javascriptとhtmlを書き換えました。
同一html内の複数タブ設置に対応不可能だったので、対応可能にさせました。
これでコピペと id="num2" の数字部分を増やしていけばいくらでも設置できるようになったと思います。
    • good
    • 0
この回答へのお礼

お礼が遅くなってすみません。
教えていただいた書き方で設置できました!
また、すぐに回答していただいてとても助かりました。
ありがとうございました。

お礼日時:2011/04/20 18:42

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qタブ切り替え 複数同時を複数組 javascript

タブ切り替え 複数同時を複数組 javascript
タブ切り替えのページを作りたいのですが
ググっても複数同時に切り替えるものや複数組のものはあっても
複数同時を複数組切り替えるものはありません。
したいことは

|タブ1|タブ2|タブ3|
|コンテンツ1-1|コンテンツ1-2|コンテンツ1-3|

|タブ4|タブ5|タブ6|
|コンテンツ4-1|コンテンツ4-2|コンテンツ4-3|

|タブ7|タブ8|タブ9|
|コンテンツ7-1|コンテンツ7-2|コンテンツ7-3|




これが

|タブ1|タブ2|タブ3|←タブ2を押した場合
|コンテンツ2-1|コンテンツ2-2|コンテンツ2-3|

|タブ4|タブ5|タブ6|←タブ5を押した場合
|コンテンツ5-1|コンテンツ5-2|コンテンツ5-3|

|タブ7|タブ8|タブ9|
|コンテンツ7-1|コンテンツ7-2|コンテンツ7-3|




というのができません。
上のタブを操作すると
下のコンテンツが消えてしまい
下のタブを操作すると
上が消えたり

また複数タブできた場合は
複数箇所同時はできませんでした。

javascript初心者の私にどなたかご教授を。

コンテンツそのものを消すやり方でもいいですが
なるべくclassを変更で消す方法がいいです。
よろしくお願いします。

タブ切り替え 複数同時を複数組 javascript
タブ切り替えのページを作りたいのですが
ググっても複数同時に切り替えるものや複数組のものはあっても
複数同時を複数組切り替えるものはありません。
したいことは

|タブ1|タブ2|タブ3|
|コンテンツ1-1|コンテンツ1-2|コンテンツ1-3|

|タブ4|タブ5|タブ6|
|コンテンツ4-1|コンテンツ4-2|コンテンツ4-3|

|タブ7|タブ8|タブ9|
|コンテンツ7-1|コンテンツ7-2|コンテンツ7-3|




これが

|タブ1|タブ2|タブ3|←タブ2...続きを読む

Aベストアンサー

複数が独立して動作すればよいのですよね?

タブ切替のライブラリはたくさん作られていると思いますので、気の利いたものならそのように作られていると思いますが…
例えば(↓)などもその一つで、そのページ内でも2つのタブが作動しています。
ぐぐれば、たくさん見つかると思いますが、一例として。
(使ったことがないので、評価はわかりません。あくまでも例です)
 http://www.kminek.pl/lab/yetii/

>classを変更で消す方法がいいです
(↑)の例ではアクティブなタブにactiveクラスを設定するような方法で行なっているみたい。


複数のタブが連動してとかいう意味のご質問でしたら、作らないとダメかも…

Q同HTML内で複数のjQueryを設置する方法

複数のjQueryを使用し、
タブメニュータイプのものと自動スライドショータイプのを
同じHTML内にいれようとしていますが、
片方のみしか作動しません。

色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。
http://stacktrace.jp/jquery/with_other_lib.html
こちらのサイトでは意味がわからず・・・

使用しているものは以下です。
----------------------------------------
<script type="text/javascript" src="js3/accordian.pack.js"></script>

<script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script>
<script type="text/javascript" src="js2/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
filmstrip_size: 6,
frame_width: 145,
frame_height: 160,
background_color: 'transparent',
nav_theme: 'dark',
border: 'none',
show_captions:true,
caption_text_color: 'black'
});
});
</script>
----------------------------------------

タブメニューがaccordian.pack.js、
その下のすべてがスライドショーのものです。
スライドショーはこちらを参考にしてつくりました。
http://spaceforaname.com/filmstrip.html


本当に困っております。
どうかご回答お願い致します。

複数のjQueryを使用し、
タブメニュータイプのものと自動スライドショータイプのを
同じHTML内にいれようとしていますが、
片方のみしか作動しません。

色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。
http://stacktrace.jp/jquery/with_other_lib.html
こちらのサイトでは意味がわからず・・・

使用しているものは以下です。
----------------------------------------
<script type="text/javascript" src="js3/accordian.pack.js...続きを読む

Aベストアンサー

accordian.pack.jsはグローバルで$関数を定義しています。
jQueryはそれを上書きしますからjQueryのあとにaccordian.pack.jsを読み込んで下さい。

<script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js3/accordian.pack.js"></script>

逆にjQuery側はグローバルの$が使えなくなるので以下に書き換えます。
他3つのプラグインはグローバルの$を参照してませんから、そのままで修正の必要はないです。

<script type="text/javascript">
jQuery(document).ready(function($) {
...

readyのコールバック関数はjQueryへの参照を引数に渡して実行されます。
これは$(document).ready(callback)のショートカット$(callback)も同じです。

accordian.pack.jsはグローバルで$関数を定義しています。
jQueryはそれを上書きしますからjQueryのあとにaccordian.pack.jsを読み込んで下さい。

<script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js3/accordian.pack.js"></script>

逆にjQuery側はグローバルの$が使えなくなるので以下に書き換えます。
他3つのプラグインはグローバルの$を参照してませんから、そのままで修正の必要はないです。

<script type="text/javascript">
jQuery(docum...続きを読む

Q複数bxsliderをタブで切り替えたいのですが…

初めまして。

現在、仕事でECサイトを作成しているのですが、
複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

■仕様したJquery【bxslider】
http://bxslider.com/


サイトのコード記述は下記の通りです。

HTML-------------------------------

<ul id="tab">
<li class="select">総合</li>
<li>トップス</li>
<li>ボトムス</li>
</ul>

<!--rank01-->
<div class="content_wrap">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->

<!--rank02-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->


<!--rank03-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
※rank02同様
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->


jquery.bxslider.cssはほぼダウンロードしたままを使用していますが、
タブに対するcssはこちらです。

CSS-------------------------------

ul#tab{
display:table;
table-layout:fixed;
width:100%;
}

#tab li.select {
background: none repeat scroll 0% 0% #fff;
color:#000;
border-top:#d9d9d9 1px solid;
border-left:#d9d9d9 1px solid;
border-right:#d9d9d9 1px solid;
}

#tab li {
display:table-cell;
padding: 10px;
list-style: none outside none;
cursor: pointer;
background: none repeat scroll 0% 0% #d9d9d9;
text-align:center;
border:#FFFFFF 1px solid;
border-top-left-radius:5px; /* 左上角丸 */
border-top-right-radius:5px;
color:#666;
font-size:8px;
}

.content_wrap {
width: 100%;
height:auto;
font-size: 20px;
text-align: center;
line-height: 100px;
background: none repeat scroll 0% 0% #fff;
color: #000;
overflow:hidden;
}

.disnon {
display: none;
}

タブのJava Scriptは、

Java Script-------------------------------
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

sliderの方のJava Scriptは、

Java Script-------------------------------
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
});

以上です。

まだまだ知識も浅く、Java Scriptに関しては特に勉強不足で、いつもJqueryを手探りで実装している状態です。
この文章で質問事項もしっかりと伝えることが出来ているのか不安ですが、どなたか良きアドバイスお願いできますでしょうか。

よろしくお願い致します。

初めまして。

現在、仕事でECサイトを作成しているのですが、
複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

■仕様したJquery【bxslider】
http://bxslider.com/


サイトのコード記述は下記の通りです。

HTML-------------------------------

<ul id="tab">
<li class="select">総合</li>
<li>トップス</li>
<li>ボトムス</li>
...続きを読む

Aベストアンサー

●HTMLの<div class="content_wrap disnon">のdisnonを削除。
●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>

【jQuery説明】
概要としては、スクリプトの実行の順序を変えるって感じで。
①まず最初にbxsliderを実行。
②その後にタブの非表示。
disnonを消したので代わりに、.content_wrapの1つ目以外を.hide()で隠す。
③それからタブのスクリプト。
disnon消したし、クラスdisnonにほかの役目がなさそうだったので、
タブの表示非表示を.hide()と.show()に変えましたが、もともとのaddClass,removeClassのままでも良いと思います。

あとセレクタで何度も出てくるものは代入したほうが良いかも。。この程度ならしなくてもほぼ速度変わらないと思いますが。。

※もしこれでうまく行かなかったら、②③はjQueryじゃなくてjsのwindow.onload = function() {}で囲って試してください。あくまで順序のために実行タイミングを変えるだけですけど。

頑張ってください。

●HTMLの<div class="content_wrap disnon">のdisnonを削除。
●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>

【jQuery説明】
概...続きを読む

Q1ページ内に 複数のタブボックスを設置

wordpressを利用し、
http://black-flag.net/jquery/20130918-4799.html
こちらのjqueryをタブの様につかっております。参考: http://cafe-elk.com/

これをカテゴリ一覧で 添付画像のように使いたいのですが、
設置したところ最初の1個しか動作しませんでした。
コードは以下の様に書いています。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

ここにタブのようなjquery UIのhtmlタグ挿入

<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>


似たような動きであれば別のjqueryでもいいのですか?
どのようにすれば思った通りになるでしょうか?
よろしくお願いします。

Aベストアンサー

1ページ内にタブボックスをたくさん設置 - JavaScript - 教えて!goo( http://oshiete.goo.ne.jp/qa/8743314.html )
との関連だと思いますが、できません。
・HTML内に同じIDは複数置けません。
 class名にしても、異なる動作をさせることはできません。
  一番目のボックスと二番目のボックスは異なる動作になります。表示位置などが違う

 そのjavascriptで動作させるページ。画面を上にスクロールさせてから、リンクを押したら元の位置に戻るでしょ!!!。なぜならリンク先のターゲットの位置がウィンドウ左上を原点にしているからです。

 ですから、二つの理由で、複数のタブボックスを一つのページには不可能なのです。
★HTMLが文書構造だけを明瞭にマークアップされていれば、スタイルシートで行なうほうが簡単でしょう。それでもタブボックスとして機能するボックスは一箇所だけです。
 羅列されている異なるsectionについて、ひとつのビュー枠に表示させることになるでしょう。
 わからやすいようにHTML5風に書くと
<section>
 <section>
  <section>
  </section>
  <nav></nav>
 </section>
 <section>
  <section>
  </section>
  <nav></nav>
 </section>
 <section>
  <section>
  </section>
  <nav></nav>
 </section>
を、
<section>
┌<section> ┐
│  <nav> │次のsub sectionへのリンクも含む
├─────┤
│<section> │
└─────┘
  以下のsub sub sectionは見せない。

 

1ページ内にタブボックスをたくさん設置 - JavaScript - 教えて!goo( http://oshiete.goo.ne.jp/qa/8743314.html )
との関連だと思いますが、できません。
・HTML内に同じIDは複数置けません。
 class名にしても、異なる動作をさせることはできません。
  一番目のボックスと二番目のボックスは異なる動作になります。表示位置などが違う

 そのjavascriptで動作させるページ。画面を上にスクロールさせてから、リンクを押したら元の位置に戻るでしょ!!!。なぜならリンク先のターゲットの位置がウィンドウ左...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qfunctionから別のfunctionを実行したい

よろしくお願いします

今JavaScriptで
function a(){
処理A
}
function b(){
処理B
}
function c(){
処理C
処理Aをして終わり
}
と言うことをしたいのですが

function a と同じコードをcに書くのが大変なので
function cからaを呼び出して実行することができないかと考えています

検索も色々してみたのですが
これと言った答えがなかったので質問しました
よろしくお願いします。

Aベストアンサー

他の箇所から、function a()をコールするときと同様に、function c()内でfunction a()をコールすることができます。

function c()
{
処理C
a();
}

QjQueryでタブ切り替え

jQueryでタブ切り替えを行うため、以下のように設定しました。

$(function(){
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('non');
$(".content_wrap").eq(num).removeClass('non');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

<ul id="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
</ul>
<div class="content_wrap">タブ1の中身</div>
<div class="content_wrap non">タブ2の中身</div>

こちらは問題なく動作しました。
で、このhtmlのセットを複数設置したい要望がありまして、

<ul class="tab">
<li class="select">タブ1-1</li>
<li>タブ1-2</li>
</ul>
<div class="content_wrap">タブ1-1の中身</div>
<div class="content_wrap non">タブ1-2の中身</div>

<ul class="tab">
<li class="select">タブ2-1</li>
<li>タブ2-2</li>
</ul>
<div class="content_wrap">タブ2-1の中身</div>
<div class="content_wrap non">タブ2-2の中身</div>

・・・

としていきたいのですが、この場合のjQueryはどのように記述すればいいでしょうか。

$(".tab li").click(function() {
var numCont = $(".tab").index(this);
var num = $(".tab li").index(this);
numCont++;
$(".tab:nth-child("+ numCont +") li .content_wrap").addClass('non');
$(".tab:nth-child("+ numCont +") li .content_wrap").eq(num).removeClass('non');
$(".tab:nth-child("+ numCont +") li").removeClass('select');
$(".tab:nth-child("+ numCont +") li").addClass('select')
});

としてみたのですが、まず何番目のタブセットかを指定するnumContが取得できていません。
タブが選ばれた時に、選んだエリアと、選んだliを同時に取得する方法がわかりません。
thisを使ってもう少しうまい書き方があるような気もするのですが、何分経験不足なためにご指南頂けると幸いです。

jQueryでタブ切り替えを行うため、以下のように設定しました。

$(function(){
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('non');
$(".content_wrap").eq(num).removeClass('non');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

<ul id="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
</ul>
<div class="content_wrap">タブ1の中身</div>
...続きを読む

Aベストアンサー

こんにちは。
確認できる環境にないので、イメージの回答になってしまいますが…

複数セットある場合は、各単位毎にdiv要素などで括っておくと処理がしやすくなります。
また、セット数が増減しても対応可能なように、文書構成を利用した相対的位置関係で処理するような記述をしておくと便利だと思います。
具体的には、まず、その(親)div要素を探して、後は、その要素の子孫要素だけを対象に操作するような記述にしておけば、そのセットだけを対象にすることができます。

さて、ご提示のHTMLのままで処理することももちろん可能です。
処理が少しだけ面倒かもしれませんが、

>numContが取得できていません。
セットの順序は文書の中でのul.tabの順を得れば良いと思いますが、thisはli要素ですよね。
var numCont = $(".tab").index($(this).parent());
のようにすることで取得できると思います。

全体を改めて考えてみるなら、
$(".tab li").click(function() {
var ul = $(this).parent();
var idx = $(">li", ul).removeClass("select").index(this);
$(this).addClass("select");

var content = ul.next(".content_wrap");
for(var i = 0; i < $(">li", ul).length; i++){
if(i == idx) content.removeClass("non");
else content.addClass("non");
content = content.next(".content_wrap");
}
});

※ 実行を確認していませんのでタイポやミスがあるかもしれません。ご参考まで。

こんにちは。
確認できる環境にないので、イメージの回答になってしまいますが…

複数セットある場合は、各単位毎にdiv要素などで括っておくと処理がしやすくなります。
また、セット数が増減しても対応可能なように、文書構成を利用した相対的位置関係で処理するような記述をしておくと便利だと思います。
具体的には、まず、その(親)div要素を探して、後は、その要素の子孫要素だけを対象に操作するような記述にしておけば、そのセットだけを対象にすることができます。

さて、ご提示のHTMLのままで処理するこ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qreturn trueとreturn falseの用途・違いは・・・?

functionやifなどで「return true」「return false」というのを見かけますが、これの違いを教えてください。あと最近

if(!obj){
return true;
}

という文を見かけました。
これがifじゃなくてfunctionなら、ブール値が返るのでtrueとfalseの違いがありますが、このifではなぜreturn trueを使っているのか分かりません。「return false」を書くと、ifやfunctionを強制的に抜ける「break」と同じ役割を果たすと聞いた事がありますが、trueは知りません。

・・・というより、ifでreturnを使う意味もよく分からなくなってきました。
if文は何も返りませんし、返したところで受け取る方法がありませんよね?
これもどういう意味なのか、教えてください。
よろしくお願いします。

Aベストアンサー

return TRUE; はその関数が正常に終了(期待した結果)することを
示し、return FALSE; は関数が失敗(期待しなかった結果)と言えば
わかりやすいでしょうか。

if文はifの後の式が、真か偽(0)かを判定しているものです。
if(!obj){ は、objが偽ならreturn true;とするという関数の仕様
になっていますね。if(obj==0)ならtrue(1)を返すという具合です。

Qラジオボタンの切替で表示する内容を変更

上部にラジオボタンが複数ある画面で
クリックしたタイトルに合わせた内容をその下に表示させたいのですが
どうにもやり方が思い浮かばないので力を貸して下さい。

ここで”内容”と言っているのは以下に示す動画を表示するブログツールのことで
(1)と(2)では別の動画が表示される設定のため、
ラジオボタンのonClickイベントか何かで値を取得し
以下のスクリプトを切り換えるのかなぁ、くらいはわかっても
具体的な方法がわかりません。
(ちなみにページの初期表示時には(1)を表示)
どなたか教えて頂けないでしょうか?
どうかお願いいたします。

(1):<SCRIPT language="JavaScript" charset="utf-8" SRC="http://vachane.com/YouTube/tag/parts.php?size=l&isMute=0&videoID=&invalidID=&keyword=F1&firstID=&r=&partsID=1179326934"></SCRIPT><NOSCRIPT><br><a href="http://vachane.com/YouTube/blog_parts/index.php?keyword=F1&size=l" title="F1Tube:YouTubeの最新人気ランキング動画によるblogプラグイン(フリー)">F1Tube:無料動画ブログパーツFlash 【なんでもTube】</a></NOSCRIPT>

(2):<SCRIPT language="JavaScript" charset="utf-8" SRC="http://vachane.com/YouTube/tag/parts.php?size=l&isMute=0&videoID=&invalidID=&keyword=drift&firstID=&r=&partsID=1179327129"></SCRIPT><NOSCRIPT><br><a href="http://vachane.com/YouTube/blog_parts/index.php?keyword=drift&size=l" title="driftTube:YouTubeの最新人気ランキング動画によるblogプラグイン(フリー)">driftTube:無料動画ブログパーツFlash 【なんでもTube】</a></NOSCRIPT>

上部にラジオボタンが複数ある画面で
クリックしたタイトルに合わせた内容をその下に表示させたいのですが
どうにもやり方が思い浮かばないので力を貸して下さい。

ここで”内容”と言っているのは以下に示す動画を表示するブログツールのことで
(1)と(2)では別の動画が表示される設定のため、
ラジオボタンのonClickイベントか何かで値を取得し
以下のスクリプトを切り換えるのかなぁ、くらいはわかっても
具体的な方法がわかりません。
(ちなみにページの初期表示時には(1)を表示)
どなたか教えて頂...続きを読む

Aベストアンサー

状況がよくわかりませんが、単に表示をきりかえるだけなら以下のような
やり方になると思います。

<html>
<head>
<style type="text/css">
#contents2,#contents3,#contents4{
display:none;
}
</style>
<script language=javascript>
function view(divId,divClass){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className==divClass){
if(divs[i].id==divId) divs[i].style.display="block";
else divs[i].style.display="none";
}
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="category" id="category1" onClick="view('contents1','contensGroup')" checked><label for="category1">エリア1</label>
<input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア2</label>
<input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア3</label>
<input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア4</label>
</form>
<div id="contents1" class="contensGroup">内容1</div>
<div id="contents2" class="contensGroup">内容2</div>
<div id="contents3" class="contensGroup">内容3</div>
<div id="contents4" class="contensGroup">内容4</div>
</body>
</html>

状況がよくわかりませんが、単に表示をきりかえるだけなら以下のような
やり方になると思います。

<html>
<head>
<style type="text/css">
#contents2,#contents3,#contents4{
display:none;
}
</style>
<script language=javascript>
function view(divId,divClass){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className==divClass){
if(divs[i].id==divId) divs[i].style.display="block";
else divs[i].style.display="none";
...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング